How to build a Jamstack website with Nuxt.js and Vue.js

Starting from scratch

I always find the best way to learn a framework is by starting from scratch when setting it up. CLIs are cool, and I use them often, but if this is your first time then I cannot recommend starting from scratch more.

1. Create a directory

Let's get started by creating a fresh, empty directory and changing into it:

mkdir my-project && cd my-project

2. Create a package.json file

The essence of any Node-based project is a package.json file. It lets us define any packages used as well as scripts that we can run through the command line. Add the following to get started:

{
	"name": "my-project",
	"scripts": {
		"start": "nuxt"
	}
}

Notice the start command we've added under scripts. This invokes the "global" command nuxt which we will make available in the next step. I'll delve into what this command does in a moment, but in short it's the starting point for developing with Nuxt.js locally.

3. Install Nuxt.js

This is as simple as running npm install --save nuxt, or yarn add nuxt --dev for all you cool cats and kittens. In fact, I'll be using Yarn going forward so strap in.

You'll now end up with a package.json file looking something like this:

{
	"name": "my-project",
	"scripts": {
		"start": "nuxt"
	},
	"devDependencies": {
		"nuxt": "^2.12.2"
	}
}

Pit Stop

Installing Nuxt.js was the most important step above. What we're doing here is just making Nuxt's build tools available within the project context so we can have it work its magic against our soon-to-be-added files. With just one command, nuxt, we can have a Jamstack website up and running in seconds. But first we need to carve out a few files and folders to give Nuxt something to work with.

Core concepts

Nuxt.js doesn't require any files or folders to run, which is very cool. It removes any confusing configuration and lets you get started with developing your app instantly. I could even end the tutorial here and we'd have achieved the goal of building a Jamstack website with Nuxt.js.

But in the spirit of learning let's go over some of the key concepts of a Nuxt.js app.

Pages

Pages are the best place to start to get content in front of your eyes. Start by creating the reserved index.vue file within the pages directory. Nuxt will take note of this and start serving it as the home page.

It's worth noting at this point that pages are treated as a component would in Vue.js. You can use Single File Components (SFCs) to organise your components and pages in a more intuitive way.

Any further pages you create will take their file names as the pathname. Create sample-page.vue and you can access this at /sample-page. You can even have dynamic paths. For example, _slug.vue will take the current path's "slug" and allow you to pull content dynamically through the route.params.slug property.

Layouts

Layouts are optional wrappers for the pages that allow you to easily change the structure of a page. By default every page will be assigned to layouts/default.vue but any custom layout can be added and referenced to by a page.

The global <nuxt /> component is the placeholder for any page content (defined in your page components from the last step) meaning you can wrap it in anything you like. It's a handy way of amending the wrapper of an app without messing with the <body> tag.

<template>
	<div class="default-layout">
	  <nuxt />
  </div>
</template>

I've often used this as a way to include global components, such as the header, footer or a menu drawer. Having these global components will allow for a consistent experience as the user navigates the site, and Nuxt's layouts make this super easy.

Adam Chipperfield