From: ZHAO Jinxiang <xiaoxiangmoe@gmail.com>
Date: Tue, 28 Dec 2021 09:27:18 +0000 (+0800)
Subject: fix: more accurate types for URL and vue-router (#23)
X-Git-Tag: v3.0.6~8
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=195a35e9a4455475ac281065330438bb2c694723;p=thirdparty%2Fvuejs%2Fcreate-vue.git

fix: more accurate types for URL and vue-router (#23)
---

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'