chore: playground updates

Author: posva

docs/.vitepress/config.ts

@@ -12,6 +12,7 @@ import {
 import {
   apiIndexFile,
   typedRouterFile,
+  typedRouterFileAsModule,
   usersLoaderFile,
   vueShimFile,
 } from './twoslash-files'
@@ -22,6 +23,7 @@ export default defineConfig({
       transformerTwoslash({
         twoslashOptions: {
           extraFiles: {
+            'router.ts': typedRouterFileAsModule,
             'typed-router.d.ts': typedRouterFile,
             'api/index.ts': apiIndexFile,
             '../api/index.ts': apiIndexFile,

docs/.vitepress/twoslash-files.ts

@@ -1,12 +1,13 @@
 export const typedRouterFile = `
+import type {
+  RouteRecordInfo,
+  ParamValue,
+  ParamValueOneOrMore,
+  ParamValueZeroOrMore,
+  ParamValueZeroOrOne,
+} from 'vue-router'
+
 declare module 'vue-router/auto-routes' {
-  import type {
-    RouteRecordInfo,
-    ParamValue,
-    ParamValueOneOrMore,
-    ParamValueZeroOrMore,
-    ParamValueZeroOrOne,
-  } from 'unplugin-vue-router/types'
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>
     '/users': RouteRecordInfo<
@@ -30,6 +31,7 @@ declare module 'vue-router/auto-routes' {
   }
 }
 `
+export const typedRouterFileAsModule = typedRouterFile + '\nexport {}\n'
 export const apiIndexFile = `
 export interface User {
   id: number

docs/guide/extending-routes.md

@@ -53,7 +53,7 @@ export {}
 // ---cut-end---
 // @errors: 2322 2339
 // @moduleResolution: bundler
-import { definePage } from 'vue-router/auto'
+import { definePage } from 'unplugin-vue-router/runtime'
 
 definePage({
   alias: ['/n/:name'],
@@ -94,7 +94,7 @@ Note you can specify the language to use with `<route lang="yaml">`. By default,
 As an escape-hatch, it's possible to extend the routes **at runtime** by simply changing the `routes` array before passing it to `createRouter()`. Since these changes are made at runtime, they are not reflected in the generated `typed-router.d.ts` file.
 
 ```js{4-9}
-import { createWebHistory, createRouter } from 'vue-router/auto'
+import { createWebHistory, createRouter } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
 
 for (const route of routes) {
@@ -115,7 +115,7 @@ As this plugin evolves, this should be used less and less and only become necess
 One example of this is using [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) which can only be used this way:
 
 ```ts
-import { createRouter } from 'vue-router/auto'
+import { createRouter } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
 import { setupLayouts } from 'virtual:generated-layouts'
 

docs/guide/typescript.md

@@ -24,9 +24,8 @@ You can commit the newly added `.d.ts` files to your repository to make your lif
 import 'unplugin-vue-router/client'
 import './typed-router.d'
 // ---cut-end---
-// @errors: 2322 2339
 // @moduleResolution: bundler
-import { useRouter, useRoute } from 'vue-router/auto'
+import { useRouter, useRoute } from 'vue-router'
 const router = useRouter()
 router.push('')
 //           ^|
@@ -48,16 +47,15 @@ Extending types with dynamically added routes:
 
 ```ts
 export {} // needed in .d.ts files
+import type {
+  RouteRecordInfo,
+  ParamValue,
+  // these are other param helper types
+  ParamValueOneOrMore,
+  ParamValueZeroOrMore,
+  ParamValueZeroOrOne,
+} from 'vue-router'
 declare module 'vue-router/auto-routes' {
-  import type {
-    RouteRecordInfo,
-    ParamValue,
-    // these are other param helper types
-    ParamValueOneOrMore,
-    ParamValueZeroOrMore,
-    ParamValueZeroOrOne,
-  } from 'unplugin-vue-router/types'
-
   export interface RouteNamedMap {
     // the key is the name and should match the first generic of RouteRecordInfo
     'custom-dynamic-name': RouteRecordInfo<
@@ -77,7 +75,7 @@ declare module 'vue-router/auto-routes' {
 The `Router` type gives you access to the typed version of the router instance. It's also the _ReturnType_ of the `useRouter()` function.
 
 ```ts
-import type { Router } from 'vue-router/auto'
+import type { Router } from 'vue-router'
 ```
 
 ### `RouteLocationResolved`
@@ -98,7 +96,7 @@ You have the same equivalents for `RouteLocation`, `RouteLocationNormalized`, an
 // ---cut-start---
 import 'unplugin-vue-router/client'
 import './typed-router.d'
-import { useRoute, type RouteLocationNormalizedLoaded } from 'vue-router/auto'
+import { useRoute, type RouteLocationNormalizedLoaded } from 'vue-router'
 // ---cut-end---
 // @errors: 2322 2339
 // @moduleResolution: bundler

docs/introduction.md

@@ -102,15 +102,15 @@ After adding this plugin, **start the dev server** (usually `npm run dev`) **to
 // It's recommended to commit this file.
 // Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
 
-declare module 'vue-router/auto-routes' {
-  import type {
-    RouteRecordInfo,
-    ParamValue,
-    ParamValueOneOrMore,
-    ParamValueZeroOrMore,
-    ParamValueZeroOrOne,
-  } from 'unplugin-vue-router/types'
+import type {
+  RouteRecordInfo,
+  ParamValue,
+  ParamValueOneOrMore,
+  ParamValueZeroOrMore,
+  ParamValueZeroOrOne,
+} from 'vue-router'
 
+declare module 'vue-router/auto-routes' {
   /**
    * Route name map generated by unplugin-vue-router
    */
@@ -177,8 +177,7 @@ Given the following route configuration:
 ::: code-group
 
 ```ts [src/router.ts]
-import { createRouter, createWebHistory } from 'vue-router' // [!code --]
-import { createRouter, createWebHistory } from 'vue-router/auto' // [!code ++]
+import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes' // [!code ++]
 
 export const router = createRouter({
@@ -226,7 +225,7 @@ Check the [file-based routing](/guide/file-based-routing) guide for more informa
 
 ```ts{2-3,6-9,12} [src/main.ts]
 import { createApp } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router/auto'
+import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
 import App from './App.vue'
 
@@ -309,6 +308,8 @@ export default defineConfig({
 })
 ```
 
+FIXME: DELETE
+
 Note that the `vue-router` preset might export less things than the one exported by `unplugin-vue-router` so you might need to add any other imports you were relying on manually:
 
 ```ts

docs/rfcs/data-loaders/index.md

@@ -202,7 +202,8 @@ You might only be interested in trying out Data Loaders. In that case, check out
 
 ```ts{2,9}
 import { createApp } from 'vue'
-import { DataLoaderPlugin, createRouter } from 'vue-router/auto'
+import { createRouter } from 'vue-router'
+import { DataLoaderPlugin } from 'vue-router/auto'
 
 const router = createRouter({
   // ...
@@ -562,7 +563,8 @@ Since navigation loaders can run in parallel, they can return different navigati
 ```ts{3-6} twoslash
 import 'unplugin-vue-router/client'
 import { createApp } from 'vue'
-import { DataLoaderPlugin, createRouter, createWebHistory } from 'vue-router/auto'
+import { createRouter, createWebHistory } from 'vue-router'
+import { DataLoaderPlugin } from 'vue-router/auto'
 const app = createApp({})
 const router = createRouter({
   history: createWebHistory(),

playground/src/main.ts

@@ -1,6 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+// FIXME:
 import { DataLoaderPlugin } from 'vue-router/auto'
+// import { DataLoaderPlugin } from 'unplugin-vue-router/runtime'
 import { MutationCache, QueryCache, VueQueryPlugin } from '@tanstack/vue-query'
 import { createPinia } from 'pinia'
 import { QueryPlugin } from '@pinia/colada'

playground/src/pages/users/query.[id].vue

@@ -2,10 +2,7 @@
 // FIXME: should be able to import from vue-router or auto import
 // import { defineQueryLoader } from 'unplugin-vue-router/data-loaders/vue-query'
 
-import {
-  type TypesConfig,
-  type RouteRecordName,
-} from 'unplugin-vue-router/types'
+import { type RouteRecordName } from 'vue-router'
 import { computed } from 'vue'
 const a: RouteRecordName = '/articles'
 

playground/typed-router.d.ts

@@ -66,4 +66,3 @@ declare module 'vue-router/auto-routes' {
     '/with-extension': RouteRecordInfo<'/with-extension', '/with-extension', Record<never, never>, Record<never, never>>,
   }
 }
-