a first look at nuxtJS part 1 - setup, pages

NuxtJS is a Vue meta-framework created by Sébastien Chopin in October 2016. It is a progressive framework designed for creating modern web applications. It is based on official Vue libraries including Vue Core, Vue Router, and Vuex.

It was inspired by NextJS and much like that React framework it started as a solution for server-side rendering. In recent years though it has expanded to include static site generation inspired by projects like Gatsby and Gridsome.

NuxtJS automatically generates the vue-router configuration based on your file tree of Vue files inside the pages directory. When you create a .vue file in your pages directory you will have basic routing working with no extra configuration needed.

All the code for this series is available at the following repo. Each part of the series will have its own branch corresponding to the state of the project at the end of that article.

Installation #

To start we will create a directory, initialize a package.json file.

mkdir ajcwebdev-nuxt
cd ajcwebdev-nuxt
yarn init -y

Create the following files:

• .gitignore
• .env
• README.md

touch .gitignore .env README.md

Add the following scripts to package.json.

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "generate": "nuxt generate",
  "start": "nuxt start"
}

Add the following to .gitignore so we do not commit our dependencies or environment variables.

node_modules
.env
.nuxt
.DS_Store

To install Nuxt we will enter the following command:

yarn add nuxt

This will install a ton of dependencies. Trust the dependencies. Believe in the dependencies.

If we check our package.json file we'll see nuxt has been installed with the current version, which as of this writing is 2.15.3.

"dependencies": {
  "nuxt": "^2.15.3"
}

Create home page #

To create our first page we will enter the following command:

mkdir pages
touch pages/index.vue

This creates our pages directory and a file inside the directory called index.vue. Open index.vue and enter the following Vue code:

// pages/index.vue

<template>
  <h1>ajcwebdev</h1>
</template>

Start development server #

yarn dev

Open up localhost:3000 in a browser.

Fill out Home page #

Include an <h1> for the title of the page and links to some of your social media accounts.

// pages/index.vue

<template>
  <div class="container">
    <header>
      <h1>ajcwebdev</h1>
    </header>

    <p>This is the home page</p>
    
    <footer>
      <a
        href="https://dev.to/ajcwebdev"
        target="_blank"
      >
        Blog
      </a>
      <a
        href="https://github.com/ajcwebdev"
        target="_blank"
      >
        GitHub
      </a>
    </footer>
  </div>
</template>

Add CSS #

// pages/index.vue

<template>
  ...
</template>

<style>
  .container {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
</style>

Create About page #

Create another file called about.vue for our About page.

touch pages/about.vue

The component includes a <p> tag containing a brief description of the page.

// pages/about.vue

<template>
  <div class="container">
    <p>This page tells you about stuff</p>
  </div>
</template>

Add CSS #

// pages/about.vue

<template>
  ...
</template>

<style>
  .container {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
</style>

Deploy site #

Create netlify.toml for build configuration.

touch netlify.toml

[build]
  publish = "dist/"
  command = "nuxt generate"

nuxt.config.js #

The nuxt.config.js file is the single point of configuration for Nuxt.js. If you want to add modules or override default settings, this is the place to apply the changes.

touch nuxt.config.js

Set target to static to let Nuxt.js know we are deploying our site to a static hosting provider.

// nuxt.config.js

export default {
    target: 'static'
}

Initialize git repo #

To finish off we will initialize a git repo.

git init

Add all files to staging area, make initial commit, and set origin branch to main.

git add .
git commit -m "Initial commit"
git branch -M main

Create a blank repo on GitHub and add remote.

git remote add origin https://github.com/ajcwebdev/ajcwebdev-nuxt.git

Push to main.

git push -u origin main

Connect the repo to your Netlify account and deploy using the predefined build commands. You can set a custom domain to match your project and repo name. Your site is now live.

In the next part we will be creating a layout and our first component.