Creating Routes Nuxt

Websites have pages in them, the most common one we see are the "Home page, About us, and contact us page". For example, Hashnode has different pages or routes. See the image below.

The tabs(explore, tags, bookmark) above lead you to different pages. In other to show these pages, a router is needed. In VueJs, vue-router is used, this is done by creating a route.js file and manually putting your routes in that file. This is different in NuxtJs. In Nuxt your routes are automatically created when you create a new file in the "pages directory".

To create pages in NuxtJs, follow these steps.

• Create a nuxt project, Getting started with Nuxt
• On the Pages directory of your project, create two files called about.vue and contact.vue as seen below You would notice that there is an existing file there called index.vue. This is the page you see when you create a new project.
• Paste this code in the about.vue file created

  <div>
    <h1>About Us</h1>
      <p>This is Oiza Blog, I create contents here to assist
        developers as often as I can. Kindly follow me so we can
        grow and learn together
      </p>
  </div>
</template>

• Paste this code in the contact.vue file created

  <div>
    <h1>Contact Us</h1>
    <p>You can send  a message on the comment box or send a mail to maryolorunfemi6@gmail.com.
      I will be delighted to hear from you
    </p>
  </div>
</template>

• We have to link these pages created to our index.vue page. But before then, start your project on dev environment by writing this code on your terminal. npm run dev Click on the localhost link. You should see this on your browser. Add this to your URL /about. That is http://localhost:3000/about. You should see the image below. Edit the URL to /contact. That is http://localhost:3000/contact. You should see the image below. Did you see this? Well done!!, easy right???

• To link these pages to the index.vue file, we use nuxt-link tag adding the attribute 'to' as seen below

<nuxt-link to"/contact">Contact Me<nuxt-link>

These code snippets are added to the index.vue file. See the image below for clarity

• Edit your URL to localhost again, for me it's http://localhost:3000. You should see the image below

• Click on the different links to view the new pages created!

• Finally, there's a difference between the Nuxt Link and the Anchor tag. The former doesn't refresh a page when clicked, but the latter does. Kindly see the NuxtJs documentation and check out the video on routing.

Kindly ask questions in the comment box. Thanks for reading!