Most websites will have more than one page (i.e. a home page, about page, contact page etc.). In order to show these pages, we need a Router. That's where
vue-router comes in. When working with the Vue application, you have to set up a configuration file (i.e.
router.js) and add all your routes manually to it. Nuxt.js automatically generates the
vue-router configuration for you, based on your provided Vue files inside the
pages directory. That means you never have to write a router config again! Nuxt.js also gives you automatic code-splitting for all your routes.
In other words, all you have to do to have routing in your application is to create
.vue files in the
To navigate between pages of your app, you should use the NuxtLink component. This component is included with Nuxt.js and therefore you don't have to import it as you do with other components. It is similar to the HTML
<a> tag, except that instead of using a
href="/about" we use
to="/about". If you have used
vue-router before, you can think of the
<NuxtLink> as a replacement for
A simple link to the
index.vue page in your
<template> <NuxtLink to="/">Home page</NuxtLink> </template>
For all links to pages within your site, use
<NuxtLink>. If you have links to other websites you should use the
<a> tag. See below for an example:
<template> <main> <h1>Home page</h1> <NuxtLink to="/about"> About (internal link that belongs to the Nuxt App) </NuxtLink> <a href="https://nuxtjs.org">External Link to another page</a> </main> </template>
Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!