NuxtJS For Beginners Part 1 — Creating Pages & Components

If you clicked on this article, I’m guessing that you need to create a frontend application using NuxtJS quickly, and am looking for a basic example of how to set up your pages and routes.

This article assumes that you have downloaded NuxtJS, and have no problem running it. (npm run dev) Do check out the NuxtJS documentation if you need help installing NuxtJS.

Documentation: https://nuxtjs.org/docs/2.x/get-started/installation

Structure of .vue Component Files

<template>
    <div>
        HTML stuff goes in here.
    </div>
</template>
<script>
    javascript stuff goes here.
</script>
<style>
    css stuff goes here.
</style>

You can think of components in NuxtJS as snippets of HTML code with its own javascript and CSS that can be moved around and reused in different places. Each component exists within a .vue file, and each .vue file contains 3 sections:

1. Template (inside template tags) — this contains your HTML code as well as the vuetify components used for styling
2. Script (inside script tags) — this contains your javascript code to make your component interactive
3. Style (inside style tags) — this…