Nuxt Navigation

README.md

Navigation in Nuxt

• Read NuxtJS router documentation Nuxt automatically creates routes out of all you .vue files in the pages/ directory. It uses NuxtLink syntax for all the pages in this directory (local links). For external links, use the traditional a href syntax.

Example

<template>
<nav>
  <ul>
    <li><nuxt-link to="/">Home</nuxt-link></li>
  </ul>
</template>

• This will call the index.vue in pages/
• You can use either PascalCase: NuxtLink or kebab-case nuxt-link

Ignore files

To make the router ignore certain files in your pages/ directory, you simply have to place a - infront of the filename.

pages/
  index.vue
  -about.vue

• In this example, the index page would be visible to the router, but the about page would not be.

Styling NuxtLink States

To style your nuxt-links active state with css, use the class .nuxt-link-active in your css. Note that you can do this right in your Navigation component