Free Nuxt.

js Tutorial — Vue Mastery

Course
Gregg Pollack · Follow
Published in Vue Mastery · 11 min read · Mar 28, 2019

731 4

In this Nuxt tutorial, a free lesson from the Vue Mastery course, we’ll build
an application together and learn about the folder structure that Nuxt.js
gives us out of the box. If you’re not sure why you might use Nuxt.js, you
might check out my previous article on 7 problems you can avoid by using
Nuxt.js.
 HOW TO: Create a Nuxt.js app

Open in app Sign up Sign in

Search Write

Video version of this article

Prerequisite Knowledge
From this point forward I’m going to assume that you’re comfortable with
HTML, CSS, JavaScript basics, Vue.js, Vue Router, and Vuex. If you’re not
familiar with these Vue topics, I recommend you stop here and take our Real
World Vue.js course and our Mastering Vuex course.

Creating our Initial Nuxt.js App

To get started creating our application we’ll be using create-nuxt-app . Create
Nuxt App is a command line tool that helps you create and scaffold out your
Nuxt applications. It helps you set up the default folder structure of your app,
you can optionally install your preferred server-side framework like Express
or Koa, and you can also install the Nuxt Axios module for easy Axios
integration with your app.
To get started, make sure you’re using a version of npm that’s 5.2.0 or higher.
This will ensure you have npx installed, we’ll need this command.

Then let’s run the following in your command in the terminal:

$ npx create-nuxt-app real-world-nuxt

npx is a tool intended to help round out the experience of using packages
from the npm registry — the same way npm makes it easy to install and
manage dependencies hosted on the registry, npx makes it easy to use CLI
tools and other executables hosted on the registry. In our case, that’s create-
nuxt-app .

If Yarn is your package manager of choice you can run yarn create nuxt-app
real-world-nuxt . It’ll set you up in the same way.

After running either the npx or yarn command, Create Nuxt App will
prompt you with a few questions to get you setup with your app’s default
configuration.

Here is how we’re going to answer for our project, and I really encourage you
to code with me.

731 4
It will also create a git repository for you, and run npm install to fetch all
dependencies.

To run the app that was just created in development mode, we’ll need to cd
into the directory it created for us run the following command:

$ npm run dev

This will startup our Nuxt.js server in development mode. By default, the
project will serve from http://localhost:3000/ . Visiting that URL will show
you the scaffolded project with a link to Nuxt’s documentation.
This would be a good point to create our first git commit, and add a repo to
github (or wherever you like to store your source code).

Now we’re in a good position to start building the events app. Before we get
started, let’s go over the folder structure that was created for us by create-
nuxt-app .

What Vue (not Nuxt) Would Have Given Us

If we had created just a Vue application using the Vue CLI, it would given us
just a /src directory and inside that a components directory. This leaves us
with a few questions:

Do we put all our components in one /components directory?

Do we create a /views directory?
Where do our layouts go? You know, the ones with <router-view /> ?

The Nuxt.js Component Folder Structure

Open the project generated by create-nuxt-app in your code editor of choice,
and you’ll see a list of folders where your entire Nuxt application will live.
You’ll first notice that Nuxt.js has no /src directory, these folder are in root.
Three of the eight folders there are the component folders:

Each of these folders will contain component .vue files, and they each start
out with a single default generated file, which together showed us the page
we saw when we launched the development server.

Here are the remaining five folders Nuxt generated for us.

/store
A folder to contain all of your app’s Vuex Store Files. Nuxt gives you two
different ways to create your store and we’ll dive deeper into how as the
course progresses.

/static
Use this directory for storing static assets. For example, robots.txt or your
favicon. Every single file in this directory is mapped to the server root,
usually at / .

/assets
This directory contains un-compiled assets such as Stylus or Sass files,
images, or fonts. By default, Nuxt uses vue-loader, file-loader and url-loader
webpack loaders for strong assets serving. If you don’t want assets to be
affected by webpack, use the static directory for storing those assets.

/plugins
This folder contains your JavaScript plugins that you want to run before
instantiating the root Vue.js Application. This directory is helpful when using
your own libraries or Vue plugins.

/middleware
Middleware lets you define custom functions that can be run before
rendering either a page or a group of pages (layouts). This folder contains
your application middleware for that purpose.

Finally, you’ll notice a configuration file called nuxt.config.js . We’ll get to

this in a future lesson. But, for now, know that this is the single file that
you’ll be using to write extra configuration, or to modify configuration that
Nuxt sets up for your app by default.

Here’s a simple slide showing each of these:

Image Assets Example

Usually we’ll want to place all our images in the assets directory where Nuxt
will use vue-loader, file-loader, and url-loader for effective asset serving. For
example, if we placed a logo.png file in our assets directory, to use this in a
component template we would write:

📜 /pages/index.vue
<img src="~/assets/logo.png">
When we build our project, if our image is >= 1 kb, it will use version hashes
for caching and render out:

<img src="/_nuxt/img/82f7965.png">

The 82f7965 is the hash we’re talking about. This is beneficial because if our
logo.png file changes in the future, but the name itself remains the same,
the hash will change, and thus the new logo will be loaded in our customer’s
browsers. Without the change of hash our customer’s browser may continue
to load the old image.

When we build our project, if our image is < 1 kb it will inline the image to
reduce http requests, looking something like this:

<img src="data:image/png;base64,R0l...">

Obviously where I put … it would be a much longer string, which contains all
the data for the image. By placing the image code right there on the screen,
we avoid an extra network request to fetch the file.

Creating our First Pages & Routes

In a minute we’re going to create our first two pages with links so we can
navigate between them. We’ll create an /pages/index.vue where we’ll
eventually list our events, and a /pages/create.vue where we’ll create an
event list. Once we create these do you think we’ll need to create
a router.js ?
Nope, Nuxt autogenerates the routes for us. We don’t need to write this
code:

const router = new Router({

routes: [
{
path: '/',
component: 'pages/index.vue'
},
{
path: '/create',
component: 'pages/create.vue'
}
]
})

Steps to Build our Example App

We’ll be doing the following step by step:

1. Fix the settings in VS Code.

2. Copy/paste some global styles into our /layout/default.vue .

3. Simplify our /pages/index.vue .

4. Startup our development server and test.

5. Create /pages/create.vue .

6. Create a new component for navigation /component/NavBar.vue .

7. Use our NavBar component in our /layout/default.vue .

Step 1 — Fixing Settings in VS Code

If you followed along with us in Real World Vue when we setup our VS Code
for editing Vue projects, you may run into a conflict between Vetur’s Prettier
HTML formatting and the ESLint formatting on our project. If you have the
same problem that I did, you’ll want to go into Preferences => Settings =>
Extensions => Vetur, and change the default HTML formatter from
prettyhtml to none, as shown below:

Step 2 — Adding Styles into our /layout/default.vue

To start building our example app, we’re going to change our default layout
to the following. Notice that we added an id to our <div> element, and a
bunch of our own styles. You also might notice the <nuxt /> tag, which is
where our /page components get rendered. It behaves a lot like our <router-
view /> .

📜 /layout/default.vue
<template>
<div id="app">
<nuxt />
</div>
</template>
<style>
html {
-webkit-text-size-adjust: 100%;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
}
#app {
box-sizing: border-box;
width: 500px;
padding: 0 20px 20px;
margin: 0 auto;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
a {
color: #39b982;
font-weight: 600;
background-color: transparent;
}
img {
border-style: none;
width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
display: flex;
align-items: center;
font-family: 'Montserrat', sans-serif;
}
h1 {
font-size: 50px;
font-weight: 700;
}
h2 {
font-size: 38px;
font-weight: 700;
}
h3 {
font-size: 28px;
font-weight: 700;
}
 h4 {
font-size: 21px;
font-weight: 700;
}
h5 {
font-size: 16px;
font-weight: 700;
}
h6 {
font-size: 15px;
font-weight: 700;
}
b,
strong {
font-weight: bolder;
}
small {
font-size: 80%;
}
.eyebrow {
font-size: 20px;
}
.-text-primary {
color: #39b982;
}
.-text-base {
color: #000;
}
.-text-error {
color: tomato;
}
.-text-gray {
color: rgba(0, 0, 0, 0.5);
}
.-shadow {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0,
0, 0, 0.13);
}
.badge {
display: inline-flex;
height: 26px;
width: auto;
padding: 0 7px;
margin: 0 5px;
background: transparent;
border-radius: 13px;
font-size: 13px;
font-weight: 400;
line-height: 26px;
}
.badge.-fill-gradient {
 background: linear-gradient(to right, #16c0b0, #84cf6a);
color: #fff;
}
button,
label,
input,
optgroup,
select,
textarea {
display: inline-flex;
font-family: 'Open sans', sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: none;
}
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
outline: 2px solid #39b982;
}
label {
color: rgba(0, 0, 0, 0.5);
font-weight: 700;
}
input,
textarea {
box-sizing: border-box;
border: solid 1px rgba(0, 0, 0, 0.4);
}
textarea {
width: 100%;
overflow: auto;
font-size: 20px;
}
[type='checkbox'],
[type='radio'] {
box-sizing: border-box;
padding: 0;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
[type='search'] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
[type='text'],
[type='number'],
[type='search'],
[type='password'] {
height: 52px;
width: 100%;
padding: 0 10px;
font-size: 20px;
}
[type='text']:focus,
[type='number']:focus,
[type='search']:focus,
[type='password']:focus {
border-color: #39b982;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
[hidden] {
display: none;
}
.error {
border: 1px solid red;
}
select {
width: 100%;
height: 52px;
padding: 0 24px 0 10px;
vertical-align: middle;
 background: #fff
url("data:image/svg+xml;charset=utf8,%3Csvg
xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath
fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
no-repeat right 12px center;
background-size: 8px 10px;
border: solid 1px rgba(0, 0, 0, 0.4);
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select:focus {
border-color: #39b982;
outline: 0;
}
select:focus::ms-value {
color: #000;
background: #fff;
}
select::ms-expand {
opacity: 0;
}
.field {
margin-bottom: 24px;
}
.error {
border: 1px solid red;
}
.errorMessage {
color: red;
}
</style>

Step 3 — Simplify /pages/index.vue

Next we’ll open our /pages/index.vue file which Vue created for us, delete
everything we see there and replace it with:

📜 /pages/index.vue
<template>
<div>
 <h1>Events</h1>
</div>
</template>

Step 4 — Startup our Development Server and Test

Now let’s try out our code so far and make sure everything is working. We’ll
make sure our development server is running npm run dev , and call up our
browser. You should see on http://localhost:3000/

Wonderful!

Step 5 — Create /pages/create.vue

We’re going to create our second page now, with the simple template code:

📜 /pages/create.vue
<template>
<div>
<h1>Create An Event</h1>
</div>
</template>

If we dive into our browser, we can indeed navigate to both pages even
though we haven’t created or modified a router.js file. Nuxt.js is doing the
routing for us.
Step 6 — Create a NavBar Component for Navigation
Next, we’ll delete the /component/Logo.vue file that the Nuxt generator
created for us, and create our own component. Notice that we’re using the
nuxt-link to generate our links instead of router-link .

📜 /component/NavBar.vue
<template>
<div class="nav">
<nuxt-link to="/" class="brand">Real World Events</nuxt-link>
<nav>
<nuxt-link to="/">List</nuxt-link>&nbsp;|
<nuxt-link to="/create">Create</nuxt-link>
</nav>
</div>
</template>
<style scoped>
.brand {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
 font-size: 1.5em;
color: #39b982;
text-decoration: none;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
}
.nav .nav-item {
box-sizing: border-box;
margin: 0 5px;
color: rgba(0, 0, 0, 0.5);
text-decoration: none;
}
.nav .nav-item.router-link-exact-active {
color: #39b982;
border-bottom: solid 2px #39b982;
}
.nav a {
display: inline-block;
}
</style>

Now we need to use this component inside our layout, just like we would
include any other component.

📜 /layouts/default.vue
<template>
<div id="app">
<nav-bar/>
<nuxt/>
</div>
</template>
<script>
import NavBar from "~/components/NavBar.vue";
export default {
components: {
NavBar
}
};
</script>
 <style>
...
</style>

Now that we’ve made these changes we can jump into the browser and see
our Nuxt application in action.

⏪ To Re-Vue
In this tutorial we learned how to create a Nuxt.js project, about the different
directories Nuxt.js creates for you, and how to start building page
components and link them together. If you’d like to continue learning Nuxt
with us, you might consider subscribing to Vue Mastery’s Scaling Vue with
Nuxt course.
 Web Development Vuejs Nuxtjs JavaScript

Published in Vue Mastery Follow

8.7K Followers · Last published Dec 19, 2024

Access the ultimate collection of Vue.js courses at https://www.vuemastery.com/

Written by Gregg Pollack Follow

2.3K Followers · 19 Following

Responses (4)
 To respond to this story,
get the free Medium app.

Ayodotun Ajala
Sep 6, 2019

First time I am learning nuxt.js and this article just demystified it for me. Wish I could give more than 50claps.
Thank you so much.

Anthony Gore
Mar 29, 2019

Great article! I definitely learned something. Thanks for writing this.

Soleymanian Usc
Jun 29, 2022

thank you ! it was so usefull.

i have a problem when i want to deploy my nuxt poject ; it's a nuxt template , i added some vue files to the
template and it was working fine , but when i do "npm run generate" , those files i added , made error and say
not found route for them!

See all responses

More from Gregg Pollack and Vue Mastery

In Vue Mastery by Gregg Pollack In Vue Mastery by Vue Mastery

Reactivity 🎆
The Best Explanation of JavaScript What’s next for Vue in 2025?
Discover the latest Vue tools and updates for
2025 to enhance your development workflo…
By understanding what reactivity is and how it
works, you can improve your development…

Jul 14, 2018 4.7K 11 Dec 18, 2024 22

In Vue Mastery by Derick Ruiz In Vue Mastery by Gregg Pollack

10 reasons to use Nuxt.js for your 7 Problems you can avoid by using
next web application Nuxt.js for your next Vue app
If you’re a Vue.js developer, by now you’ve Vue.js is a great choice as a framework for
probably heard of Nuxt.js. But you might not… your application. But, there are a few…
Mar 20, 2018 6K 17 Jan 29, 2019 684 3

See all from Gregg Pollack See all from Vue Mastery

Recommended from Medium

In Let’s Code Future by Let's Code Future Ankita Patel

Productivity 🔥
8 Modern Dev Tools to 100X Your State Management in Vue 3: Pinia
vs Vuex
In today’s fast-paced tech world, developers When developing complex applications with
constantly seek tools to streamline their… Vue.js, managing the state of your applicatio…

Jan 8 550 12 Oct 1, 2024 1

Lists

General Coding Knowledge Stories to Help You Grow as a

20 stories · 1933 saves Software Developer
 19 stories · 1615 saves

Coding & Development Tech & Tools

11 stories · 1022 saves 23 stories · 402 saves

Mallikarjun Pasupuleti Jessica Stillman

Optimizing Pinia: Best Practices for Jeff Bezos Says the 1-Hour Rule
Faster Vue.js State Management Makes Him Smarter. New…
Pinia is the official state management library Jeff Bezos’s morning routine has long
for Vue 3, designed as a lighter, more moder… included the one-hour rule. New…

Sep 22, 2024 213 3 Oct 30, 2024 24K 710

In Level Up Coding by Jacob Bennett Vinod Pal

The 5 paid subscriptions I actually How I Review Code As a Senior

use in 2025 as a Staff Software… Developer For Better Results
Tools I use that are cheaper than Netflix I have been doing code reviews for quite
some time and have become better at it. Fro…
 Jan 8 10K 239 Jan 26 1.4K 34

See more recommendations