From 195a35e9a4455475ac281065330438bb2c694723 Mon Sep 17 00:00:00 2001
From: ZHAO Jinxiang <xiaoxiangmoe@gmail.com>
Date: Tue, 28 Dec 2021 17:27:18 +0800
Subject: [PATCH] fix: more accurate types for URL and vue-router (#23)

---
 playground/default/vite.config.js                          | 2 +-
 playground/jsx-pinia-with-tests/vite.config.js             | 2 +-
 playground/jsx-pinia/vite.config.js                        | 2 +-
 playground/jsx-router-pinia-with-tests/src/App.vue         | 7 ++++---
 playground/jsx-router-pinia-with-tests/vite.config.js      | 2 +-
 playground/jsx-router-pinia/src/App.vue                    | 7 ++++---
 playground/jsx-router-pinia/vite.config.js                 | 2 +-
 playground/jsx-router-with-tests/src/App.vue               | 7 ++++---
 playground/jsx-router-with-tests/vite.config.js            | 2 +-
 playground/jsx-router/src/App.vue                          | 7 ++++---
 playground/jsx-router/vite.config.js                       | 2 +-
 playground/jsx-with-tests/vite.config.js                   | 2 +-
 playground/jsx/vite.config.js                              | 2 +-
 playground/pinia-with-tests/vite.config.js                 | 2 +-
 playground/pinia/vite.config.js                            | 2 +-
 playground/router-pinia-with-tests/src/App.vue             | 7 ++++---
 playground/router-pinia-with-tests/vite.config.js          | 2 +-
 playground/router-pinia/src/App.vue                        | 7 ++++---
 playground/router-pinia/vite.config.js                     | 2 +-
 playground/router-with-tests/src/App.vue                   | 7 ++++---
 playground/router-with-tests/vite.config.js                | 2 +-
 playground/router/src/App.vue                              | 7 ++++---
 playground/router/vite.config.js                           | 2 +-
 playground/typescript-jsx-pinia-with-tests/vite.config.ts  | 2 +-
 playground/typescript-jsx-pinia/vite.config.ts             | 2 +-
 .../typescript-jsx-router-pinia-with-tests/src/App.vue     | 7 ++++---
 .../typescript-jsx-router-pinia-with-tests/vite.config.ts  | 2 +-
 playground/typescript-jsx-router-pinia/src/App.vue         | 7 ++++---
 playground/typescript-jsx-router-pinia/vite.config.ts      | 2 +-
 playground/typescript-jsx-router-with-tests/src/App.vue    | 7 ++++---
 playground/typescript-jsx-router-with-tests/vite.config.ts | 2 +-
 playground/typescript-jsx-router/src/App.vue               | 7 ++++---
 playground/typescript-jsx-router/vite.config.ts            | 2 +-
 playground/typescript-jsx-with-tests/vite.config.ts        | 2 +-
 playground/typescript-jsx/vite.config.ts                   | 2 +-
 playground/typescript-pinia-with-tests/vite.config.ts      | 2 +-
 playground/typescript-pinia/vite.config.ts                 | 2 +-
 playground/typescript-router-pinia-with-tests/src/App.vue  | 7 ++++---
 .../typescript-router-pinia-with-tests/vite.config.ts      | 2 +-
 playground/typescript-router-pinia/src/App.vue             | 7 ++++---
 playground/typescript-router-pinia/vite.config.ts          | 2 +-
 playground/typescript-router-with-tests/src/App.vue        | 7 ++++---
 playground/typescript-router-with-tests/vite.config.ts     | 2 +-
 playground/typescript-router/src/App.vue                   | 7 ++++---
 playground/typescript-router/vite.config.ts                | 2 +-
 playground/typescript-with-tests/vite.config.ts            | 2 +-
 playground/typescript/vite.config.ts                       | 2 +-
 playground/with-tests/vite.config.js                       | 2 +-
 template/base/vite.config.js                               | 2 +-
 template/code/router/src/App.vue                           | 7 ++++---
 template/code/typescript-router/src/App.vue                | 7 ++++---
 template/config/jsx/vite.config.js                         | 2 +-
 52 files changed, 106 insertions(+), 88 deletions(-)

diff --git a/playground/default/vite.config.js b/playground/default/vite.config.js
index 5cd06c63..116273fb 100644
--- a/playground/default/vite.config.js
+++ b/playground/default/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/jsx-pinia-with-tests/vite.config.js b/playground/jsx-pinia-with-tests/vite.config.js
index f140f276..db4edfd9 100644
--- a/playground/jsx-pinia-with-tests/vite.config.js
+++ b/playground/jsx-pinia-with-tests/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/jsx-pinia/vite.config.js b/playground/jsx-pinia/vite.config.js
index f140f276..db4edfd9 100644
--- a/playground/jsx-pinia/vite.config.js
+++ b/playground/jsx-pinia/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/jsx-router-pinia-with-tests/src/App.vue b/playground/jsx-router-pinia-with-tests/src/App.vue
index 37edbaf4..460e5b29 100644
--- a/playground/jsx-router-pinia-with-tests/src/App.vue
+++ b/playground/jsx-router-pinia-with-tests/src/App.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/jsx-router-pinia-with-tests/vite.config.js b/playground/jsx-router-pinia-with-tests/vite.config.js
index f140f276..db4edfd9 100644
--- a/playground/jsx-router-pinia-with-tests/vite.config.js
+++ b/playground/jsx-router-pinia-with-tests/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/jsx-router-pinia/src/App.vue b/playground/jsx-router-pinia/src/App.vue
index 37edbaf4..460e5b29 100644
--- a/playground/jsx-router-pinia/src/App.vue
+++ b/playground/jsx-router-pinia/src/App.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/jsx-router-pinia/vite.config.js b/playground/jsx-router-pinia/vite.config.js
index f140f276..db4edfd9 100644
--- a/playground/jsx-router-pinia/vite.config.js
+++ b/playground/jsx-router-pinia/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/jsx-router-with-tests/src/App.vue b/playground/jsx-router-with-tests/src/App.vue
index 37edbaf4..460e5b29 100644
--- a/playground/jsx-router-with-tests/src/App.vue
+++ b/playground/jsx-router-with-tests/src/App.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/jsx-router-with-tests/vite.config.js b/playground/jsx-router-with-tests/vite.config.js
index f140f276..db4edfd9 100644
--- a/playground/jsx-router-with-tests/vite.config.js
+++ b/playground/jsx-router-with-tests/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/jsx-router/src/App.vue b/playground/jsx-router/src/App.vue
index 37edbaf4..460e5b29 100644
--- a/playground/jsx-router/src/App.vue
+++ b/playground/jsx-router/src/App.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/jsx-router/vite.config.js b/playground/jsx-router/vite.config.js
index f140f276..db4edfd9 100644
--- a/playground/jsx-router/vite.config.js
+++ b/playground/jsx-router/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/jsx-with-tests/vite.config.js b/playground/jsx-with-tests/vite.config.js
index f140f276..db4edfd9 100644
--- a/playground/jsx-with-tests/vite.config.js
+++ b/playground/jsx-with-tests/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/jsx/vite.config.js b/playground/jsx/vite.config.js
index f140f276..db4edfd9 100644
--- a/playground/jsx/vite.config.js
+++ b/playground/jsx/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/pinia-with-tests/vite.config.js b/playground/pinia-with-tests/vite.config.js
index 5cd06c63..116273fb 100644
--- a/playground/pinia-with-tests/vite.config.js
+++ b/playground/pinia-with-tests/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/pinia/vite.config.js b/playground/pinia/vite.config.js
index 5cd06c63..116273fb 100644
--- a/playground/pinia/vite.config.js
+++ b/playground/pinia/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/router-pinia-with-tests/src/App.vue b/playground/router-pinia-with-tests/src/App.vue
index 37edbaf4..460e5b29 100644
--- a/playground/router-pinia-with-tests/src/App.vue
+++ b/playground/router-pinia-with-tests/src/App.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/router-pinia-with-tests/vite.config.js b/playground/router-pinia-with-tests/vite.config.js
index 5cd06c63..116273fb 100644
--- a/playground/router-pinia-with-tests/vite.config.js
+++ b/playground/router-pinia-with-tests/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/router-pinia/src/App.vue b/playground/router-pinia/src/App.vue
index 37edbaf4..460e5b29 100644
--- a/playground/router-pinia/src/App.vue
+++ b/playground/router-pinia/src/App.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/router-pinia/vite.config.js b/playground/router-pinia/vite.config.js
index 5cd06c63..116273fb 100644
--- a/playground/router-pinia/vite.config.js
+++ b/playground/router-pinia/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/router-with-tests/src/App.vue b/playground/router-with-tests/src/App.vue
index 37edbaf4..460e5b29 100644
--- a/playground/router-with-tests/src/App.vue
+++ b/playground/router-with-tests/src/App.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/router-with-tests/vite.config.js b/playground/router-with-tests/vite.config.js
index 5cd06c63..116273fb 100644
--- a/playground/router-with-tests/vite.config.js
+++ b/playground/router-with-tests/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/router/src/App.vue b/playground/router/src/App.vue
index 37edbaf4..460e5b29 100644
--- a/playground/router/src/App.vue
+++ b/playground/router/src/App.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/router/vite.config.js b/playground/router/vite.config.js
index 5cd06c63..116273fb 100644
--- a/playground/router/vite.config.js
+++ b/playground/router/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript-jsx-pinia-with-tests/vite.config.ts b/playground/typescript-jsx-pinia-with-tests/vite.config.ts
index f140f276..db4edfd9 100644
--- a/playground/typescript-jsx-pinia-with-tests/vite.config.ts
+++ b/playground/typescript-jsx-pinia-with-tests/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript-jsx-pinia/vite.config.ts b/playground/typescript-jsx-pinia/vite.config.ts
index f140f276..db4edfd9 100644
--- a/playground/typescript-jsx-pinia/vite.config.ts
+++ b/playground/typescript-jsx-pinia/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript-jsx-router-pinia-with-tests/src/App.vue b/playground/typescript-jsx-router-pinia-with-tests/src/App.vue
index 8a1e9b19..7de68e9b 100644
--- a/playground/typescript-jsx-router-pinia-with-tests/src/App.vue
+++ b/playground/typescript-jsx-router-pinia-with-tests/src/App.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/typescript-jsx-router-pinia-with-tests/vite.config.ts b/playground/typescript-jsx-router-pinia-with-tests/vite.config.ts
index f140f276..db4edfd9 100644
--- a/playground/typescript-jsx-router-pinia-with-tests/vite.config.ts
+++ b/playground/typescript-jsx-router-pinia-with-tests/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript-jsx-router-pinia/src/App.vue b/playground/typescript-jsx-router-pinia/src/App.vue
index 8a1e9b19..7de68e9b 100644
--- a/playground/typescript-jsx-router-pinia/src/App.vue
+++ b/playground/typescript-jsx-router-pinia/src/App.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/typescript-jsx-router-pinia/vite.config.ts b/playground/typescript-jsx-router-pinia/vite.config.ts
index f140f276..db4edfd9 100644
--- a/playground/typescript-jsx-router-pinia/vite.config.ts
+++ b/playground/typescript-jsx-router-pinia/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript-jsx-router-with-tests/src/App.vue b/playground/typescript-jsx-router-with-tests/src/App.vue
index 8a1e9b19..7de68e9b 100644
--- a/playground/typescript-jsx-router-with-tests/src/App.vue
+++ b/playground/typescript-jsx-router-with-tests/src/App.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/typescript-jsx-router-with-tests/vite.config.ts b/playground/typescript-jsx-router-with-tests/vite.config.ts
index f140f276..db4edfd9 100644
--- a/playground/typescript-jsx-router-with-tests/vite.config.ts
+++ b/playground/typescript-jsx-router-with-tests/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript-jsx-router/src/App.vue b/playground/typescript-jsx-router/src/App.vue
index 8a1e9b19..7de68e9b 100644
--- a/playground/typescript-jsx-router/src/App.vue
+++ b/playground/typescript-jsx-router/src/App.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/typescript-jsx-router/vite.config.ts b/playground/typescript-jsx-router/vite.config.ts
index f140f276..db4edfd9 100644
--- a/playground/typescript-jsx-router/vite.config.ts
+++ b/playground/typescript-jsx-router/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript-jsx-with-tests/vite.config.ts b/playground/typescript-jsx-with-tests/vite.config.ts
index f140f276..db4edfd9 100644
--- a/playground/typescript-jsx-with-tests/vite.config.ts
+++ b/playground/typescript-jsx-with-tests/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript-jsx/vite.config.ts b/playground/typescript-jsx/vite.config.ts
index f140f276..db4edfd9 100644
--- a/playground/typescript-jsx/vite.config.ts
+++ b/playground/typescript-jsx/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript-pinia-with-tests/vite.config.ts b/playground/typescript-pinia-with-tests/vite.config.ts
index 5cd06c63..116273fb 100644
--- a/playground/typescript-pinia-with-tests/vite.config.ts
+++ b/playground/typescript-pinia-with-tests/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript-pinia/vite.config.ts b/playground/typescript-pinia/vite.config.ts
index 5cd06c63..116273fb 100644
--- a/playground/typescript-pinia/vite.config.ts
+++ b/playground/typescript-pinia/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript-router-pinia-with-tests/src/App.vue b/playground/typescript-router-pinia-with-tests/src/App.vue
index 8a1e9b19..7de68e9b 100644
--- a/playground/typescript-router-pinia-with-tests/src/App.vue
+++ b/playground/typescript-router-pinia-with-tests/src/App.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/typescript-router-pinia-with-tests/vite.config.ts b/playground/typescript-router-pinia-with-tests/vite.config.ts
index 5cd06c63..116273fb 100644
--- a/playground/typescript-router-pinia-with-tests/vite.config.ts
+++ b/playground/typescript-router-pinia-with-tests/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript-router-pinia/src/App.vue b/playground/typescript-router-pinia/src/App.vue
index 8a1e9b19..7de68e9b 100644
--- a/playground/typescript-router-pinia/src/App.vue
+++ b/playground/typescript-router-pinia/src/App.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/typescript-router-pinia/vite.config.ts b/playground/typescript-router-pinia/vite.config.ts
index 5cd06c63..116273fb 100644
--- a/playground/typescript-router-pinia/vite.config.ts
+++ b/playground/typescript-router-pinia/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript-router-with-tests/src/App.vue b/playground/typescript-router-with-tests/src/App.vue
index 8a1e9b19..7de68e9b 100644
--- a/playground/typescript-router-with-tests/src/App.vue
+++ b/playground/typescript-router-with-tests/src/App.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/typescript-router-with-tests/vite.config.ts b/playground/typescript-router-with-tests/vite.config.ts
index 5cd06c63..116273fb 100644
--- a/playground/typescript-router-with-tests/vite.config.ts
+++ b/playground/typescript-router-with-tests/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript-router/src/App.vue b/playground/typescript-router/src/App.vue
index 8a1e9b19..7de68e9b 100644
--- a/playground/typescript-router/src/App.vue
+++ b/playground/typescript-router/src/App.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/playground/typescript-router/vite.config.ts b/playground/typescript-router/vite.config.ts
index 5cd06c63..116273fb 100644
--- a/playground/typescript-router/vite.config.ts
+++ b/playground/typescript-router/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript-with-tests/vite.config.ts b/playground/typescript-with-tests/vite.config.ts
index 5cd06c63..116273fb 100644
--- a/playground/typescript-with-tests/vite.config.ts
+++ b/playground/typescript-with-tests/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/typescript/vite.config.ts b/playground/typescript/vite.config.ts
index 5cd06c63..116273fb 100644
--- a/playground/typescript/vite.config.ts
+++ b/playground/typescript/vite.config.ts
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/playground/with-tests/vite.config.js b/playground/with-tests/vite.config.js
index 5cd06c63..116273fb 100644
--- a/playground/with-tests/vite.config.js
+++ b/playground/with-tests/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/template/base/vite.config.js b/template/base/vite.config.js
index 5cd06c63..116273fb 100644
--- a/template/base/vite.config.js
+++ b/template/base/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
diff --git a/template/code/router/src/App.vue b/template/code/router/src/App.vue
index 37edbaf4..460e5b29 100644
--- a/template/code/router/src/App.vue
+++ b/template/code/router/src/App.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/template/code/typescript-router/src/App.vue b/template/code/typescript-router/src/App.vue
index 8a1e9b19..7de68e9b 100644
--- a/template/code/typescript-router/src/App.vue
+++ b/template/code/typescript-router/src/App.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '@/components/HelloWorld.vue'
 </script>
 
@@ -10,13 +11,13 @@ import HelloWorld from '@/components/HelloWorld.vue'
       <HelloWorld msg="You did it!" />
 
       <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <router-view />
+  <RouterView />
 </template>
 
 <style>
diff --git a/template/config/jsx/vite.config.js b/template/config/jsx/vite.config.js
index f140f276..db4edfd9 100644
--- a/template/config/jsx/vite.config.js
+++ b/template/config/jsx/vite.config.js
@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-- 
2.39.5