Replace router-link to nuxt-link

examples/async-data/pages/index.vue

@@ -2,7 +2,7 @@
 <template>
   <div>
     <p>{{ userAgent }}</p>
-    <p><router-link to="/post">See a post (http request / Ajax)</router-link></p>
+    <p><nuxt-link to="/post">See a post (http request / Ajax)</nuxt-link></p>
   </div>
 </template>
 

examples/async-data/pages/post.vue

@@ -2,7 +2,7 @@
 <template>
   <div>
     <p>{{ post.title }}!</p>
-    <p><router-link to="/">Back home</router-link></p>
+    <p><nuxt-link to="/">Back home</nuxt-link></p>
   </div>
 </template>
 

examples/auth-routes/README.md

@@ -183,7 +183,7 @@ Let's add a `/secret` route where only the connected user can see its content:
 <template>
   <div>
     <h1>Super secret page</h1>
-    <router-link to="/">Back to the home page</router-link>
+    <nuxt-link to="/">Back to the home page</nuxt-link>
   </div>
 </template>
 

examples/auth-routes/pages/index.vue

@@ -14,7 +14,7 @@
       <p><i>You can also refresh this page, you'll still be connected!</i></p>
       <button @click="logout">Logout</button>
     </div>
-    <p><router-link to="/secret">Super secret page</router-link></p>
+    <p><nuxt-link to="/secret">Super secret page</nuxt-link></p>
   </div>
 </template>
 

examples/auth-routes/pages/secret.vue

@@ -2,7 +2,7 @@
   <div>
     <h1>Super secret page</h1>
     <p>If you try to access this URL not connected, you will be redirected to the home page (server-side or client-side)</p>
-    <router-link to="/">Back to the home page</router-link>
+    <nuxt-link to="/">Back to the home page</nuxt-link>
   </div>
 </template>
 

examples/custom-loading/pages/about.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <p>About Page</p>
-    <router-link to="/">Go to /</router-link>
+    <nuxt-link to="/">Go to /</nuxt-link>
   </div>
 </template>
 

examples/custom-loading/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <p>Hello {{ name }}!</p>
-    <router-link to="/about">Go to /about</router-link>
+    <nuxt-link to="/about">Go to /about</nuxt-link>
   </div>
 </template>
 

examples/custom-routes/layouts/app.vue

@@ -6,24 +6,24 @@
       </h1>
       <ul class="Navbar__Links">
         <li class="Navbar__Links__Item">
-          <router-link to="/team" class="Navbar__Links__Item__Link">
+          <nuxt-link to="/team" class="Navbar__Links__Item__Link">
             Basic route
-          </router-link>
+          </nuxt-link>
         </li>
         <li class="Navbar__Links__Item">
-          <router-link to="/projects" class="Navbar__Links__Item__Link">
+          <nuxt-link to="/projects" class="Navbar__Links__Item__Link">
             Dynamic routes
-          </router-link>
+          </nuxt-link>
         </li>
         <li class="Navbar__Links__Item">
-          <router-link to="/users" class="Navbar__Links__Item__Link">
+          <nuxt-link to="/users" class="Navbar__Links__Item__Link">
             Nested routes
-          </router-link>
+          </nuxt-link>
         </li>
         <li class="Navbar__Links__Item">
-          <router-link to="/posts" class="Navbar__Links__Item__Link">
+          <nuxt-link to="/posts" class="Navbar__Links__Item__Link">
             Dynamic nested routes
-          </router-link>
+          </nuxt-link>
         </li>
       </ul>
     </nav>
@@ -96,6 +96,10 @@ a, a:hover
   color: #41B883;
 }
 
+.nuxt-link-active {
+  color: #41B883 !important;
+}
+
 .fade-enter-active, .fade-leave-active {
   transition: opacity .3s;
 }

examples/custom-routes/pages/posts/index.vue

@@ -2,9 +2,9 @@
   <div class="container">
     <h2>Posts list</h2>
     <p>
-      <router-link to="/posts/welcome">
+      <nuxt-link to="/posts/welcome">
         Welcome post
-      </router-link>
+      </nuxt-link>
     </p>
   </div>
 </template>

examples/custom-routes/pages/projects/index.vue

@@ -3,9 +3,9 @@
     <h1>Dynamic route example</h1>
     <h2>Projects list</h2>
     <p>
-      <router-link :to="{ name: 'projects-slug', params: { slug: 'nuxtjs'} }">
+      <nuxt-link :to="{ name: 'projects-slug', params: { slug: 'nuxtjs'} }">
         Nuxt.js
-      </router-link>
+      </nuxt-link>
     </p>
   </div>
 </template>

examples/custom-routes/pages/users.vue

@@ -4,7 +4,7 @@
     <h2>Users list</h2>
     <ul class="users">
       <li v-for="user in users">
-        <router-link :to="{ name: 'users-id', params: { id: user.id } }">{{ user.name }}</router-link>
+        <nuxt-link :to="{ name: 'users-id', params: { id: user.id } }">{{ user.name }}</nuxt-link>
       </li>
     </ul>
     <nuxt-child :key="$route.params.id"></nuxt-child>
@@ -43,7 +43,4 @@ export default {
 .users li a:hover {
   color: #41b883;
 }
-.router-link-active {
-  color: #41b883 !important;
-}
 </style>

examples/custom-routes/pages/users/_id.vue

@@ -4,7 +4,7 @@
     <h3>{{ user.name }}</h3>
     <h4>@{{ user.username }}</h4>
     <p>Email : {{ user.email }}</p>
-    <p><router-link to="/users">List of users</router-link></p>
+    <p><nuxt-link to="/users">List of users</nuxt-link></p>
   </div>
 </template>
 

examples/extend-app/pages/about.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>Hi from {{ name }}</p>
-    <router-link to="/">Home page</router-link>
+    <nuxt-link to="/">Home page</nuxt-link>
   </div>
 </template>
 

examples/extend-app/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
     <h1>Welcome!</h1>
-    <router-link to="/about">About page</router-link>
+    <nuxt-link to="/about">About page</nuxt-link>
   </div>
 </template>

examples/global-css/pages/about.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <h1 class="title">Another Page</h1>
-    <p><router-link to="/" class="button is-medium is-info hvr-wobble-vertical">Another button</router-link></p>
-    <p><router-link to="/">Back home</router-link></p>
+    <p><nuxt-link to="/" class="button is-medium is-info hvr-wobble-vertical">Another button</nuxt-link></p>
+    <p><nuxt-link to="/">Back home</nuxt-link></p>
   </div>
 </template>

examples/global-css/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <h1 class="title">Custom CSS!</h1>
-    <p><router-link to="/about" class="button is-medium is-primary hvr-float-shadow">I am a button</router-link></p>
-    <p><router-link to="/about">About page</router-link></p>
+    <p><nuxt-link to="/about" class="button is-medium is-primary hvr-float-shadow">I am a button</nuxt-link></p>
+    <p><nuxt-link to="/about">About page</nuxt-link></p>
   </div>
 </template>

examples/head-elements/pages/about.vue

@@ -3,7 +3,7 @@
     <h1>About page</h1>
     <p>Click below to see the custom meta tags added with our custom component <code>twitter-head-card</code></p>
     <twitter-head-card></twitter-head-card>
-    <p><router-link to="/">Home page</router-link></p>
+    <p><nuxt-link to="/">Home page</nuxt-link></p>
   </div>
 </template>
 

examples/head-elements/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <h1>Home page 🚀</h1>
-    <router-link to="/about">About page</router-link>
+    <nuxt-link to="/about">About page</nuxt-link>
   </div>
 </template>
 

examples/hello-world/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
     <h1>Welcome!</h1>
-    <router-link to="/about">About page</router-link>
+    <nuxt-link to="/about">About page</nuxt-link>
   </div>
 </template>

examples/plugins-vendor/pages/about.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <img :src="thumbnailUrl" />
-    <p><router-link to="/">Home</router-link> - About</p>
+    <p><nuxt-link to="/">Home</nuxt-link> - About</p>
   </div>
 </template>
 

examples/plugins-vendor/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <p><button @click="showLoginError">Notif me!</button></p>
-    <p>Home - <router-link to="/about">About</router-link></p>
+    <p>Home - <nuxt-link to="/about">About</nuxt-link></p>
   </div>
 </template>
 

examples/routes-transitions/README.md

@@ -71,7 +71,7 @@ To define a custom transition for a specific route, simply add the `transition`
 <template>
   <div class="container">
     <h1>About page</h1>
-    <router-link to="/">Home page</router-link>
+    <nuxt-link to="/">Home page</nuxt-link>
   </div>
 </template>
 

examples/routes-transitions/pages/about.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <h1>About page</h1>
-    <router-link to="/">Home page</router-link>
+    <nuxt-link to="/">Home page</nuxt-link>
   </div>
 </template>
 

examples/routes-transitions/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
     <h1>Home page</h1>
-    <router-link to="/about">About page</router-link>
+    <nuxt-link to="/about">About page</nuxt-link>
   </div>
 </template>

examples/static-images/pages/about.vue

@@ -3,7 +3,7 @@
     <img src="~static/nuxt-black.png" />
     <h2>Thank you for testing nuxt.js</h2>
     <p>Loaded from the {{ name }}</p>
-    <p><router-link to="/">Back home</router-link></p>
+    <p><nuxt-link to="/">Back home</nuxt-link></p>
   </div>
 </template>
 

examples/static-images/pages/index.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <img src="nuxt.png" />
     <h2>Hello World.</h2>
-    <p><router-link to="/about">About</router-link></p>
+    <p><nuxt-link to="/about">About</nuxt-link></p>
   </div>
 </template>
 

examples/vuex-store/pages/about.vue

@@ -2,7 +2,7 @@
   <div>
     <p>
       <button @click="$store.commit('increment')">{{ $store.state.counter }}</button><br>
-      <router-link to="/">Home</router-link>
+      <nuxt-link to="/">Home</nuxt-link>
     </p>
   </div>
 </template>

examples/vuex-store/pages/index.vue

@@ -2,7 +2,7 @@
   <div>
     <p>
       <button @click="increment">{{ counter }}</button><br>
-      <router-link to="/about">About</router-link>
+      <nuxt-link to="/about">About</nuxt-link>
     </p>
   </div>
 </template>

lib/app/components/nuxt-error.vue

@@ -5,7 +5,7 @@
       <div class="error-wrapper-message">
         <h2 class="error-message">{{ error.message }}</h2>
       </div>
-      <p v-if="error.statusCode === 404"><router-link class="error-link" to="/">Back to the home page</router-link></p>
+      <p v-if="error.statusCode === 404"><nuxt-link class="error-link" to="/">Back to the home page</nuxt-link></p>
     </div>
   </div>
 </template>

lib/nuxt.js

@@ -39,8 +39,7 @@ class Nuxt {
       },
       router: {
         base: '/',
-        linkActiveClass: 'router-link-active',
-        routes: {}
+        linkActiveClass: 'nuxt-link-active'
       },
       build: {}
     }