diff --git a/packages/nuxt/src/pages/utils.ts b/packages/nuxt/src/pages/utils.ts
index 3f7a19d4d8..0663204749 100644
--- a/packages/nuxt/src/pages/utils.ts
+++ b/packages/nuxt/src/pages/utils.ts
@@ -104,7 +104,7 @@ function getRoutePath (tokens: SegmentToken[]): string {
           ? `:${token.value}()`
           : token.type === SegmentTokenType.catchall
             ? `:${token.value}(.*)*`
-            : encodePath(token.value))
+            : encodePath(token.value).replace(/:/g, '\\:'))
     )
   }, '/')
 }
diff --git a/packages/nuxt/test/pages.test.ts b/packages/nuxt/test/pages.test.ts
index 09b0cdae8e..b13c56a351 100644
--- a/packages/nuxt/test/pages.test.ts
+++ b/packages/nuxt/test/pages.test.ts
@@ -279,6 +279,20 @@ describe('pages:generateRoutesFromFiles', () => {
           children: []
         }
       ]
+    },
+    {
+      description: 'should allow pages with `:` in their path',
+      files: [
+        `${pagesDir}/test:name.vue`
+      ],
+      output: [
+        {
+          name: 'test:name',
+          path: '/test\\:name',
+          file: `${pagesDir}/test:name.vue`,
+          children: []
+        }
+      ]
     }
   ]