From f52304db2a4507778ef54c12a9e6dc2ccca42401 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Mon, 27 Jun 2022 15:16:13 +0200
Subject: [PATCH] feat: handle unnested routes

---
 playground/src/App.vue                        |   9 +-
 playground/src/routes/[name].vue              |  10 ++
 playground/typed-router.d.ts                  |  21 ++-
 .../generateRouteRecords.spec.ts.snap         | 165 ++++++++++++++----
 src/codegen/generateRouteMap.spec.ts          |  46 ++---
 src/codegen/generateRouteRecords.spec.ts      |  51 ++----
 src/core/context.ts                           |  16 +-
 src/core/treeLeafValue.ts                     |   3 +-
 src/core/utils.ts                             |  14 +-
 src/index.ts                                  |   2 +
 src/options.ts                                |   2 +-
 11 files changed, 232 insertions(+), 107 deletions(-)

diff --git a/playground/src/App.vue b/playground/src/App.vue
index 477886a7a..48342f1fd 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -1,4 +1,9 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRoute } from '@vue-router'
+
+const route = useRoute()
+route.name === '/about'
+</script>
 
 <template>
   <header>
@@ -11,6 +16,8 @@
         <RouterLink :to="{ path: '/articles', query: { test: 'query', n: 2 } }"
           >About</RouterLink
         >
+        <button @click="$router.push('/oeu')">Click</button>
+        {{ $route.name === '' }}
       </nav>
     </div>
   </header>
diff --git a/playground/src/routes/[name].vue b/playground/src/routes/[name].vue
index ef5fe74f8..99ca9a37d 100644
--- a/playground/src/routes/[name].vue
+++ b/playground/src/routes/[name].vue
@@ -7,6 +7,8 @@ import {
 } from '@vue-router'
 import type { RouterTyped } from '@vue-router'
 
+// const $route = useRoute()
+
 const router = useRouter()
 if (router.currentRoute.value.name === '/[name]') {
   router.currentRoute.value.params.name
@@ -20,6 +22,14 @@ onBeforeRouteUpdate((to) => {
   }
 })
 
+onBeforeRouteLeave((to, from) => {
+  if (from.name === '/[name]') {
+    from.params.name
+  } else if (to.name === '/articles/[id]+') {
+    to.params.id.map((id) => id)
+  }
+})
+
 router.resolve({ path: '' })
 router.resolve({ path: '/articles/:id' })
 router.resolve({ name: '/[name]', params: { name: 2 } }).params.name
diff --git a/playground/typed-router.d.ts b/playground/typed-router.d.ts
index d85d102c3..079ba4188 100644
--- a/playground/typed-router.d.ts
+++ b/playground/typed-router.d.ts
@@ -34,8 +34,8 @@ declare module '@vue-router/routes' {
     '/n-[[n]]/': RouteRecordInfo<'/n-[[n]]/', '/n-:n?/', Record<never, never>, Record<never, never>>,
     '/n-[[n]]/[[more]]+/[final]': RouteRecordInfo<'/n-[[n]]/[[more]]+/[final]', '/n-:n?/:more*/:final', { final: _ParamValue<true> }, { final: _ParamValue<false> }>,
     '/n-[[n]]/[[more]]+/': RouteRecordInfo<'/n-[[n]]/[[more]]+/', '/n-:n?/:more*/', Record<never, never>, Record<never, never>>,
+    '/users/[id].edit': RouteRecordInfo<'/users/[id].edit', '/users/:id/edit', { id: _ParamValue<true> }, { id: _ParamValue<false> }>,
     '/users/[id]': RouteRecordInfo<'/users/[id]', '/users/:id', { id: _ParamValue<true> }, { id: _ParamValue<false> }>,
-    '/users/edit': RouteRecordInfo<'/users/edit', '/users/edit', Record<never, never>, Record<never, never>>,
     '/users/': RouteRecordInfo<'/users/', '/users/', Record<never, never>, Record<never, never>>,
     '/deep/nesting/works/[[files]]+': RouteRecordInfo<'/deep/nesting/works/[[files]]+', '/deep/nesting/works/:files*', { files?: _ParamValueZeroOrMore<true> }, { files?: _ParamValueZeroOrMore<false> }>,
     '/deep/nesting/works/too': RouteRecordInfo<'/deep/nesting/works/too', '/deep/nesting/works/too', Record<never, never>, Record<never, never>>,
@@ -45,8 +45,6 @@ declare module '@vue-router/routes' {
 declare module '@vue-router' {
   import type { RouteNamedMap } from '@vue-router/routes'
 
-  export function useRoute<Name extends keyof RouteNamedMap = keyof RouteNamedMap>(name?: Name): RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
-
   export type RouterTyped = _RouterTyped<RouteNamedMap>
   /**
    * Generate a type safe route location. Requires the name of the route to be passed as a generic.
@@ -62,14 +60,25 @@ declare module '@vue-router' {
   export type RouteParamsRaw<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['paramsRaw']
 
   export function useRouter(): RouterTyped
+  export function useRoute<Name extends keyof RouteNamedMap = keyof RouteNamedMap>(name?: Name): RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
 
-  export function onBeforeRouteLeave(guard: NavigationGuard<RouteMap>): void
-  export function onBeforeRouteUpdate(guard: NavigationGuard<RouteMap>): void
+  export function onBeforeRouteLeave(guard: NavigationGuard<RouteNamedMap>): void
+  export function onBeforeRouteUpdate(guard: NavigationGuard<RouteNamedMap>): void
 }
 
-declare module 'vue' {
+declare module '@vue/runtime-core' {
   import type { RouteNamedMap } from '@vue-router/routes'
 
+  export interface ComponentCustomOptions {
+    beforeRouteUpdate?: NavigationGuard<RouteNamedMap>
+    beforeRouteLeave?: NavigationGuard<RouteNamedMap>
+  }
+
+  export interface ComponentCustomProperties {
+    $route: RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[keyof RouteNamedMap]
+    $router: _RouterTyped<RouteNamedMap>
+  }
+
   export interface GlobalComponents {
     RouterLink: RouterLinkTyped<RouteNamedMap>
   }
diff --git a/src/codegen/__snapshots__/generateRouteRecords.spec.ts.snap b/src/codegen/__snapshots__/generateRouteRecords.spec.ts.snap
index b812d6879..2bc80dfde 100644
--- a/src/codegen/__snapshots__/generateRouteRecords.spec.ts.snap
+++ b/src/codegen/__snapshots__/generateRouteRecords.spec.ts.snap
@@ -4,12 +4,12 @@ exports[`generateRouteRecord > adds children and name when folder and component
 "[
   {
     path: \\"/a\\",
-    name: \\"A\\",
+    name: \\"/a\\",
     component: () => import('a.vue'),
     children: [
       {
         path: \\"c\\",
-        name: \\"AC\\",
+        name: \\"/a/c\\",
         component: () => import('a/c.vue'),
         /* no children */
       }
@@ -22,7 +22,7 @@ exports[`generateRouteRecord > adds children and name when folder and component
     children: [
       {
         path: \\"c\\",
-        name: \\"BC\\",
+        name: \\"/b/c\\",
         component: () => import('b/c.vue'),
         /* no children */
       }
@@ -30,7 +30,7 @@ exports[`generateRouteRecord > adds children and name when folder and component
   },
   {
     path: \\"/d\\",
-    name: \\"D\\",
+    name: \\"/d\\",
     component: () => import('d.vue'),
     /* no children */
   }
@@ -41,7 +41,7 @@ exports[`generateRouteRecord > correctly names index.vue files 1`] = `
 "[
   {
     path: \\"/\\",
-    name: \\"Root\\",
+    name: \\"/\\",
     component: () => import('index.vue'),
     /* no children */
   },
@@ -52,7 +52,7 @@ exports[`generateRouteRecord > correctly names index.vue files 1`] = `
     children: [
       {
         path: \\"\\",
-        name: \\"B\\",
+        name: \\"/b/\\",
         component: () => import('b/index.vue'),
         /* no children */
       }
@@ -61,17 +61,114 @@ exports[`generateRouteRecord > correctly names index.vue files 1`] = `
 ]"
 `;
 
+exports[`generateRouteRecord > handles non nested routes 1`] = `
+"[
+  {
+    path: \\"/users\\",
+    name: \\"/users\\",
+    component: () => import('users.vue'),
+    children: [
+      {
+        path: \\"\\",
+        name: \\"/users/\\",
+        component: () => import('users/index.vue'),
+        /* no children */
+      },
+      {
+        path: \\"other\\",
+        name: \\"/users/other\\",
+        component: () => import('users/other.vue'),
+        /* no children */
+      },
+      {
+        path: \\":id\\",
+        name: \\"/users/[id]\\",
+        component: () => import('users/[id].vue'),
+        children: [
+          {
+            path: \\"\\",
+            name: \\"/users/[id]/\\",
+            component: () => import('users/[id]/index.vue'),
+            /* no children */
+          },
+          {
+            path: \\"other\\",
+            name: \\"/users/[id]/other\\",
+            component: () => import('users/[id]/other.vue'),
+            /* no children */
+          }
+        ],
+      },
+      {
+        path: \\":id/not-nested\\",
+        name: \\"/users/[id].not-nested\\",
+        component: () => import('users/[id].not-nested.vue'),
+        /* no children */
+      }
+    ],
+  },
+  {
+    path: \\"/users.not-nested\\",
+    name: \\"/users.not-nested\\",
+    component: () => import('users.not-nested.vue'),
+    /* no children */
+  },
+  {
+    path: \\"/users/:id/also-not-nested\\",
+    name: \\"/users.[id].also-not-nested\\",
+    component: () => import('users.[id].also-not-nested.vue'),
+    /* no children */
+  }
+]"
+`;
+
+exports[`generateRouteRecord > names > creates multi word names 1`] = `
+"[
+  {
+    path: \\"/\\",
+    name: \\"/\\",
+    component: () => import('index.vue'),
+    /* no children */
+  },
+  {
+    path: \\"/my-users\\",
+    name: \\"/my-users\\",
+    component: () => import('my-users.vue'),
+    /* no children */
+  },
+  {
+    path: \\"/MyPascalCaseUsers\\",
+    name: \\"/MyPascalCaseUsers\\",
+    component: () => import('MyPascalCaseUsers.vue'),
+    /* no children */
+  },
+  {
+    path: \\"/some-nested\\",
+    /* no name */
+    /* no component */
+    children: [
+      {
+        path: \\"file-with-:id-in-the-middle\\",
+        name: \\"/some-nested/file-with-[id]-in-the-middle\\",
+        component: () => import('some-nested/file-with-[id]-in-the-middle.vue'),
+        /* no children */
+      }
+    ],
+  }
+]"
+`;
+
 exports[`generateRouteRecord > names > creates single word names 1`] = `
 "[
   {
     path: \\"/\\",
-    name: \\"Root\\",
+    name: \\"/\\",
     component: () => import('index.vue'),
     /* no children */
   },
   {
     path: \\"/about\\",
-    name: \\"About\\",
+    name: \\"/about\\",
     component: () => import('about.vue'),
     /* no children */
   },
@@ -82,18 +179,18 @@ exports[`generateRouteRecord > names > creates single word names 1`] = `
     children: [
       {
         path: \\"\\",
-        name: \\"Users\\",
+        name: \\"/users/\\",
         component: () => import('users/index.vue'),
         /* no children */
       },
       {
         path: \\":id\\",
-        name: \\"Users$id\\",
+        name: \\"/users/[id]\\",
         component: () => import('users/[id].vue'),
         children: [
           {
             path: \\"edit\\",
-            name: \\"Users$idEdit\\",
+            name: \\"/users/[id]/edit\\",
             component: () => import('users/[id]/edit.vue'),
             /* no children */
           }
@@ -101,7 +198,7 @@ exports[`generateRouteRecord > names > creates single word names 1`] = `
       },
       {
         path: \\"new\\",
-        name: \\"UsersNew\\",
+        name: \\"/users/new\\",
         component: () => import('users/new.vue'),
         /* no children */
       }
@@ -114,29 +211,29 @@ exports[`generateRouteRecord > names > works with nested views 1`] = `
 "[
   {
     path: \\"/\\",
-    name: \\"Root\\",
+    name: \\"/\\",
     component: () => import('index.vue'),
     /* no children */
   },
   {
     path: \\"/users\\",
-    name: \\"UsersParent\\",
+    name: \\"/users\\",
     component: () => import('users.vue'),
     children: [
       {
         path: \\"\\",
-        name: \\"Users\\",
+        name: \\"/users/\\",
         component: () => import('users/index.vue'),
         /* no children */
       },
       {
         path: \\":id\\",
-        name: \\"Users$id\\",
+        name: \\"/users/[id]\\",
         component: () => import('users/[id].vue'),
         children: [
           {
             path: \\"edit\\",
-            name: \\"Users$idEdit\\",
+            name: \\"/users/[id]/edit\\",
             component: () => import('users/[id]/edit.vue'),
             /* no children */
           }
@@ -156,19 +253,19 @@ exports[`generateRouteRecord > nested children 1`] = `
     children: [
       {
         path: \\"a\\",
-        name: \\"AA\\",
+        name: \\"/a/a\\",
         component: () => import('a/a.vue'),
         /* no children */
       },
       {
         path: \\"b\\",
-        name: \\"AB\\",
+        name: \\"/a/b\\",
         component: () => import('a/b.vue'),
         /* no children */
       },
       {
         path: \\"c\\",
-        name: \\"AC\\",
+        name: \\"/a/c\\",
         component: () => import('a/c.vue'),
         /* no children */
       }
@@ -181,19 +278,19 @@ exports[`generateRouteRecord > nested children 1`] = `
     children: [
       {
         path: \\"b\\",
-        name: \\"BB\\",
+        name: \\"/b/b\\",
         component: () => import('b/b.vue'),
         /* no children */
       },
       {
         path: \\"c\\",
-        name: \\"BC\\",
+        name: \\"/b/c\\",
         component: () => import('b/c.vue'),
         /* no children */
       },
       {
         path: \\"d\\",
-        name: \\"BD\\",
+        name: \\"/b/d\\",
         component: () => import('b/d.vue'),
         /* no children */
       }
@@ -211,19 +308,19 @@ exports[`generateRouteRecord > nested children 2`] = `
     children: [
       {
         path: \\"a\\",
-        name: \\"AA\\",
+        name: \\"/a/a\\",
         component: () => import('a/a.vue'),
         /* no children */
       },
       {
         path: \\"b\\",
-        name: \\"AB\\",
+        name: \\"/a/b\\",
         component: () => import('a/b.vue'),
         /* no children */
       },
       {
         path: \\"c\\",
-        name: \\"AC\\",
+        name: \\"/a/c\\",
         component: () => import('a/c.vue'),
         /* no children */
       }
@@ -236,19 +333,19 @@ exports[`generateRouteRecord > nested children 2`] = `
     children: [
       {
         path: \\"b\\",
-        name: \\"BB\\",
+        name: \\"/b/b\\",
         component: () => import('b/b.vue'),
         /* no children */
       },
       {
         path: \\"c\\",
-        name: \\"BC\\",
+        name: \\"/b/c\\",
         component: () => import('b/c.vue'),
         /* no children */
       },
       {
         path: \\"d\\",
-        name: \\"BD\\",
+        name: \\"/b/d\\",
         component: () => import('b/d.vue'),
         /* no children */
       }
@@ -256,13 +353,13 @@ exports[`generateRouteRecord > nested children 2`] = `
   },
   {
     path: \\"/c\\",
-    name: \\"C\\",
+    name: \\"/c\\",
     component: () => import('c.vue'),
     /* no children */
   },
   {
     path: \\"/d\\",
-    name: \\"D\\",
+    name: \\"/d\\",
     component: () => import('d.vue'),
     /* no children */
   }
@@ -273,19 +370,19 @@ exports[`generateRouteRecord > works with some paths at root 1`] = `
 "[
   {
     path: \\"/a\\",
-    name: \\"A\\",
+    name: \\"/a\\",
     component: () => import('a.vue'),
     /* no children */
   },
   {
     path: \\"/b\\",
-    name: \\"B\\",
+    name: \\"/b\\",
     component: () => import('b.vue'),
     /* no children */
   },
   {
     path: \\"/c\\",
-    name: \\"C\\",
+    name: \\"/c\\",
     component: () => import('c.vue'),
     /* no children */
   }
diff --git a/src/codegen/generateRouteMap.spec.ts b/src/codegen/generateRouteMap.spec.ts
index dddc02f0a..f6516068d 100644
--- a/src/codegen/generateRouteMap.spec.ts
+++ b/src/codegen/generateRouteMap.spec.ts
@@ -18,9 +18,9 @@ describe('generateRouteNamedMap', () => {
     tree.insert('c.vue')
     expect(formatExports(generateRouteNamedMap(tree))).toMatchInlineSnapshot(`
       "export interface RouteNamedMap {
-        'A': RouteRecordInfo<'A', '/a', Record<never, never>, Record<never, never>>,
-        'B': RouteRecordInfo<'B', '/b', Record<never, never>, Record<never, never>>,
-        'C': RouteRecordInfo<'C', '/c', Record<never, never>, Record<never, never>>,
+        '/a': RouteRecordInfo<'/a', '/a', Record<never, never>, Record<never, never>>,
+        '/b': RouteRecordInfo<'/b', '/b', Record<never, never>, Record<never, never>>,
+        '/c': RouteRecordInfo<'/c', '/c', Record<never, never>, Record<never, never>>,
       }"
     `)
   })
@@ -36,13 +36,13 @@ describe('generateRouteNamedMap', () => {
     tree.insert('[...a].vue') // splat
     expect(formatExports(generateRouteNamedMap(tree))).toMatchInlineSnapshot(`
       "export interface RouteNamedMap {
-        '$a': RouteRecordInfo<'$a', '/:a', { a: _ParamValue<true> }, { a: _ParamValue<false> }>,
-        'Partial$a': RouteRecordInfo<'Partial$a', '/partial-:a', { a: _ParamValue<true> }, { a: _ParamValue<false> }>,
-        '$a?': RouteRecordInfo<'$a?', '/:a?', { a?: _ParamValueZeroOrOne<true> }, { a?: _ParamValueZeroOrOne<false> }>,
-        'Partial$a?': RouteRecordInfo<'Partial$a?', '/partial-:a?', { a?: _ParamValueZeroOrOne<true> }, { a?: _ParamValueZeroOrOne<false> }>,
-        '$a+': RouteRecordInfo<'$a+', '/:a+', { a: _ParamValueOneOrMore<true> }, { a: _ParamValueOneOrMore<false> }>,
-        '$a*': RouteRecordInfo<'$a*', '/:a*', { a?: _ParamValueZeroOrMore<true> }, { a?: _ParamValueZeroOrMore<false> }>,
-        '$$a': RouteRecordInfo<'$$a', '/:a(.*)', { a: _ParamValue<true> }, { a: _ParamValue<false> }>,
+        '/[a]': RouteRecordInfo<'/[a]', '/:a', { a: _ParamValue<true> }, { a: _ParamValue<false> }>,
+        '/partial-[a]': RouteRecordInfo<'/partial-[a]', '/partial-:a', { a: _ParamValue<true> }, { a: _ParamValue<false> }>,
+        '/[[a]]': RouteRecordInfo<'/[[a]]', '/:a?', { a?: _ParamValueZeroOrOne<true> }, { a?: _ParamValueZeroOrOne<false> }>,
+        '/partial-[[a]]': RouteRecordInfo<'/partial-[[a]]', '/partial-:a?', { a?: _ParamValueZeroOrOne<true> }, { a?: _ParamValueZeroOrOne<false> }>,
+        '/[a]+': RouteRecordInfo<'/[a]+', '/:a+', { a: _ParamValueOneOrMore<true> }, { a: _ParamValueOneOrMore<false> }>,
+        '/[[a]]+': RouteRecordInfo<'/[[a]]+', '/:a*', { a?: _ParamValueZeroOrMore<true> }, { a?: _ParamValueZeroOrMore<false> }>,
+        '/[...a]': RouteRecordInfo<'/[...a]', '/:a(.*)', { a: _ParamValue<true> }, { a: _ParamValue<false> }>,
       }"
     `)
   })
@@ -57,11 +57,11 @@ describe('generateRouteNamedMap', () => {
     tree.insert('n/[...a].vue') // splat
     expect(formatExports(generateRouteNamedMap(tree))).toMatchInlineSnapshot(`
       "export interface RouteNamedMap {
-        'N$a': RouteRecordInfo<'N$a', '/n/:a', { a: _ParamValue<true> }, { a: _ParamValue<false> }>,
-        'N$a?': RouteRecordInfo<'N$a?', '/n/:a?', { a?: _ParamValueZeroOrOne<true> }, { a?: _ParamValueZeroOrOne<false> }>,
-        'N$a+': RouteRecordInfo<'N$a+', '/n/:a+', { a: _ParamValueOneOrMore<true> }, { a: _ParamValueOneOrMore<false> }>,
-        'N$a*': RouteRecordInfo<'N$a*', '/n/:a*', { a?: _ParamValueZeroOrMore<true> }, { a?: _ParamValueZeroOrMore<false> }>,
-        'N$$a': RouteRecordInfo<'N$$a', '/n/:a(.*)', { a: _ParamValue<true> }, { a: _ParamValue<false> }>,
+        '/n/[a]': RouteRecordInfo<'/n/[a]', '/n/:a', { a: _ParamValue<true> }, { a: _ParamValue<false> }>,
+        '/n/[[a]]': RouteRecordInfo<'/n/[[a]]', '/n/:a?', { a?: _ParamValueZeroOrOne<true> }, { a?: _ParamValueZeroOrOne<false> }>,
+        '/n/[a]+': RouteRecordInfo<'/n/[a]+', '/n/:a+', { a: _ParamValueOneOrMore<true> }, { a: _ParamValueOneOrMore<false> }>,
+        '/n/[[a]]+': RouteRecordInfo<'/n/[[a]]+', '/n/:a*', { a?: _ParamValueZeroOrMore<true> }, { a?: _ParamValueZeroOrMore<false> }>,
+        '/n/[...a]': RouteRecordInfo<'/n/[...a]', '/n/:a(.*)', { a: _ParamValue<true> }, { a: _ParamValue<false> }>,
       }"
     `)
   })
@@ -78,14 +78,14 @@ describe('generateRouteNamedMap', () => {
     tree.insert('d.vue')
     expect(formatExports(generateRouteNamedMap(tree))).toMatchInlineSnapshot(`
       "export interface RouteNamedMap {
-        'AA': RouteRecordInfo<'AA', '/a/a', Record<never, never>, Record<never, never>>,
-        'AB': RouteRecordInfo<'AB', '/a/b', Record<never, never>, Record<never, never>>,
-        'AC': RouteRecordInfo<'AC', '/a/c', Record<never, never>, Record<never, never>>,
-        'BB': RouteRecordInfo<'BB', '/b/b', Record<never, never>, Record<never, never>>,
-        'BC': RouteRecordInfo<'BC', '/b/c', Record<never, never>, Record<never, never>>,
-        'BD': RouteRecordInfo<'BD', '/b/d', Record<never, never>, Record<never, never>>,
-        'C': RouteRecordInfo<'C', '/c', Record<never, never>, Record<never, never>>,
-        'D': RouteRecordInfo<'D', '/d', Record<never, never>, Record<never, never>>,
+        '/a/a': RouteRecordInfo<'/a/a', '/a/a', Record<never, never>, Record<never, never>>,
+        '/a/b': RouteRecordInfo<'/a/b', '/a/b', Record<never, never>, Record<never, never>>,
+        '/a/c': RouteRecordInfo<'/a/c', '/a/c', Record<never, never>, Record<never, never>>,
+        '/b/b': RouteRecordInfo<'/b/b', '/b/b', Record<never, never>, Record<never, never>>,
+        '/b/c': RouteRecordInfo<'/b/c', '/b/c', Record<never, never>, Record<never, never>>,
+        '/b/d': RouteRecordInfo<'/b/d', '/b/d', Record<never, never>, Record<never, never>>,
+        '/c': RouteRecordInfo<'/c', '/c', Record<never, never>, Record<never, never>>,
+        '/d': RouteRecordInfo<'/d', '/d', Record<never, never>, Record<never, never>>,
       }"
     `)
   })
diff --git a/src/codegen/generateRouteRecords.spec.ts b/src/codegen/generateRouteRecords.spec.ts
index d6027eec0..36081fd7a 100644
--- a/src/codegen/generateRouteRecords.spec.ts
+++ b/src/codegen/generateRouteRecords.spec.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { createPrefixTree } from '../core/tree'
 import { DEFAULT_OPTIONS } from '../options'
+import { RouteRecordRaw } from 'vue-router'
 import { generateRouteRecord } from './generateRouteRecords'
 
 describe('generateRouteRecord', () => {
@@ -52,6 +53,20 @@ describe('generateRouteRecord', () => {
     expect(generateRouteRecord(tree)).toMatchSnapshot()
   })
 
+  it('handles non nested routes', () => {
+    const tree = createPrefixTree(DEFAULT_OPTIONS)
+    tree.insert('users.vue')
+    tree.insert('users/index.vue')
+    tree.insert('users/other.vue')
+    tree.insert('users.not-nested.vue')
+    tree.insert('users/[id]/index.vue')
+    tree.insert('users/[id]/other.vue')
+    tree.insert('users/[id].vue')
+    tree.insert('users/[id].not-nested.vue')
+    tree.insert('users.[id].also-not-nested.vue')
+    expect(generateRouteRecord(tree)).toMatchSnapshot()
+  })
+
   describe('names', () => {
     it('creates single word names', () => {
       const tree = createPrefixTree(DEFAULT_OPTIONS)
@@ -72,41 +87,7 @@ describe('generateRouteRecord', () => {
       tree.insert('MyPascalCaseUsers.vue')
       tree.insert('some-nested/file-with-[id]-in-the-middle.vue')
 
-      expect(generateRouteRecord(tree)).toMatchInlineSnapshot(`
-        "[
-          {
-            path: \\"/\\",
-            name: \\"Root\\",
-            component: () => import('index.vue'),
-            /* no children */
-          },
-          {
-            path: \\"/my-users\\",
-            name: \\"MyUsers\\",
-            component: () => import('my-users.vue'),
-            /* no children */
-          },
-          {
-            path: \\"/MyPascalCaseUsers\\",
-            name: \\"MyPascalCaseUsers\\",
-            component: () => import('MyPascalCaseUsers.vue'),
-            /* no children */
-          },
-          {
-            path: \\"/some-nested\\",
-            /* no name */
-            /* no component */
-            children: [
-              {
-                path: \\"file-with-:id-in-the-middle\\",
-                name: \\"SomeNestedFileWith$idInTheMiddle\\",
-                component: () => import('some-nested/file-with-[id]-in-the-middle.vue'),
-                /* no children */
-              }
-            ],
-          }
-        ]"
-      `)
+      expect(generateRouteRecord(tree)).toMatchSnapshot()
     })
 
     it('works with nested views', () => {
diff --git a/src/core/context.ts b/src/core/context.ts
index b81e799aa..a2f689c60 100644
--- a/src/core/context.ts
+++ b/src/core/context.ts
@@ -137,13 +137,23 @@ declare module '${MODULE_VUE_ROUTER}' {
   export function useRouter(): RouterTyped
   export function useRoute<Name extends keyof RouteNamedMap = keyof RouteNamedMap>(name?: Name): RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
 
-  export function onBeforeRouteLeave(guard: NavigationGuard<RouteMap>): void
-  export function onBeforeRouteUpdate(guard: NavigationGuard<RouteMap>): void
+  export function onBeforeRouteLeave(guard: NavigationGuard<RouteNamedMap>): void
+  export function onBeforeRouteUpdate(guard: NavigationGuard<RouteNamedMap>): void
 }
 
-declare module 'vue' {
+declare module '@vue/runtime-core' {
   import type { RouteNamedMap } from '${MODULE_ROUTES_PATH}'
 
+  export interface ComponentCustomOptions {
+    beforeRouteUpdate?: NavigationGuard<RouteNamedMap>
+    beforeRouteLeave?: NavigationGuard<RouteNamedMap>
+  }
+
+  export interface ComponentCustomProperties {
+    $route: RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[keyof RouteNamedMap]
+    $router: _RouterTyped<RouteNamedMap>
+  }
+
   export interface GlobalComponents {
     RouterLink: RouterLinkTyped<RouteNamedMap>
   }
diff --git a/src/core/treeLeafValue.ts b/src/core/treeLeafValue.ts
index 8e379b0ad..9ccd41b84 100644
--- a/src/core/treeLeafValue.ts
+++ b/src/core/treeLeafValue.ts
@@ -181,7 +181,8 @@ function parseSegment(
         // check if it's an optional param or not
         state = ParseSegmentState.paramOptional
       } else {
-        buffer += c
+        // allows for nested paths without nesting the views
+        buffer += c === '.' ? '/' : c
       }
     } else if (state === ParseSegmentState.paramOptional) {
       if (c === '[') {
diff --git a/src/core/utils.ts b/src/core/utils.ts
index 17e6bf976..6a353650e 100644
--- a/src/core/utils.ts
+++ b/src/core/utils.ts
@@ -101,7 +101,9 @@ export function joinPath(...paths: string[]): string {
 }
 
 function paramToName({ paramName, modifier, isSplat }: TreeRouteParam) {
-  return `${isSplat ? '$$' : '$'}${paramName}${
+  return `${isSplat ? '$' : ''}${
+    paramName.charAt(0).toUpperCase() + paramName.slice(1)
+  }${
     modifier
     // ? modifier === '+'
     //   ? 'OneOrMore'
@@ -119,7 +121,7 @@ function paramToName({ paramName, modifier, isSplat }: TreeRouteParam) {
  * @param parent - the parent node
  * @returns a route name
  */
-export function getRouteName(node: TreeLeaf): string {
+export function getPascalCaseRouteName(node: TreeLeaf): string {
   if (node.parent?.isRoot() && node.value.pathSegment === '') return 'Root'
 
   let name = node.value.subSegments
@@ -140,11 +142,17 @@ export function getRouteName(node: TreeLeaf): string {
 
   return (
     (parent && !parent.isRoot()
-      ? getRouteName(parent).replace(/Parent$/, '')
+      ? getPascalCaseRouteName(parent).replace(/Parent$/, '')
       : '') + name
   )
 }
 
+/**
+ * Joins the path segments of a node into a name that corresponds to the filepath represented by the node.
+ *
+ * @param node - the node to get the path from
+ * @returns a route name
+ */
 export function getFileBasedRouteName(node: TreeLeaf): string {
   if (!node.parent) return ''
   return getFileBasedRouteName(node.parent) + '/' + node.value.rawSegment
diff --git a/src/index.ts b/src/index.ts
index 5861c7fb0..060d178bd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -68,6 +68,8 @@ export default createUnplugin<Options>((opt) => {
   }
 })
 
+export { getFileBasedRouteName, getPascalCaseRouteName } from './core/utils'
+
 // TODO: normalize the naming: _Name for internals that should never be used by the users or to avoid conflicts (e.g. the _RouterTyped typ is used in the generated d.ts to create a typed instance of the router)
 export type {
   _RouteMapGeneric,
diff --git a/src/options.ts b/src/options.ts
index 8c14c013a..d57095dda 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -1,6 +1,6 @@
 import { isPackageExists } from 'local-pkg'
 import type { TreeLeaf } from './core/tree'
-import { getRouteName, getFileBasedRouteName } from './core/utils'
+import { getFileBasedRouteName } from './core/utils'
 
 export interface Options {
   extensions?: string[]