NUXT.

JS ESSENTIALS
CHEAT SHEET
STARTING A NEW PROJECT PAGES
From Nuxt toolkit: Nuxt reads the file tree inside the pages directory to create your
application’s routes:
$ npx create-nuxt-app <project-name>
$ cd <project-name> pages
$ npm install Installs dependencies index.vue loaded when root path /
$ npm run dev Launches the project users
index.vue /users path
_id.vue _ defines a dynamic route with a param /users/123
From scratch:

package.json
PAGE KEYS
{
"name": "my-app", export default {
"scripts": { asyncData (context) {
"dev": "nuxt" return
} axios.get(`https://my-api/posts/${context.params.id}`)
} .then((res) => {
return { title: res.data.title }
})
$ npm install --save nuxt },
Installs nuxt and saves it in package.json fetch (context) {
$ npm run dev return axios.get('http://my-api/stars').then((res)
Runs the nuxt script / initiates the app => {
context.store.commit('setStars', res.data)
})
},
FOLDER STRUCTURE head () { Set the HTML Head tags for the current page. Uses vue-meta.
return {
ASSETS - Uncompiled assets (like Less / Sass).
title: this.title, Your component's data is available with this.
STATIC - Unchanging files (like robots.txt). meta: [
COMPONENTS { hid: 'description', name: 'description',
content: 'My custom description' }
LAYOUTS - Application layouts.
]
MIDDLEWARE - Custom functions which }
run before pages. },
layout: 'my-custom-layout', Choose a custom layout for your page.
PAGES - Application views & routes from
validate (context) { If false, Nuxt loads the error page instead.
which the router is dynamically generated. return /^\\d+$/.test(context.params.id) Must be a number
PLUGINS - JS plugins run before Vue.js init. },
transition: { Define a custom transition for current page
STORE - Vuex Store files.
name: 'my-custom-transition',
mode: 'out-in'
}
}

This cheat sheet is created by

VueMastery.com
The ultimate learning resource for Vue developers.
Need help on your path to Vue Mastery? Check out our tutorials.
NUXT.JS ESSENTIALS
CHEAT SHEET
NUXT COMPONENTS ALIASES FOR REFERENCING FILES
Use <nuxt-link> to navigate between pages in your ~ to reference the source directory
components.
<template>
<nuxt-link v-bind:to="'/users' + user.name" > <img src="~/assets/your_image.png"/>
{{ user.fullName }}'s Profile</nuxt-link> </template>
<script>
import Visits from '~/components/Visits'
Use <nuxt-child/> to display child component routes in export default {
your nested routes. components: { Visits }
}
<template> </script>
<div>
<h1>I am the parent view</h1>
<nuxt-child /> VUEX STORE
</div> Nuxt automatically adds Vuex to your project if you have an
</template> index.js file in your store folder. This file must export a
method which returns a Vuex instance.
LAYOUTS
Put application layouts in the layouts folder. Use You can now use this.$store inside of your components.
the nuxt component to display content.
<template>
layouts/my-custom-layout.vue <button @click="$store.commit('increment')">
{{ $store.state.counter }}
<template> </button>
<div class="container"> </template>
<nuxt />
</div>
</template>

ERROR PAGES ADDITIONAL VUE LEARNING

Customize the error page with layouts/error.vue. Do not VueMastery.com
include <nuxt/> inside its template.

<template>
<h1 v-if="error.statusCode === 404">
Page not found Dive deep into advanced Vue concepts in our
</h1> Advanced Components course.
<h1 v-else>An error occurred</h1>
<nuxt-link to="/">Home page</nuxt-link> • Learn the full functionality of Vue
</template> • Understand how Vue internals work together
• Discover how to extend Vue as needed
<script>
export default { Plus 5 bonus videos exploring the Vue source code
props: ['error'], with Evan You, the creator of Vue.
layout: 'my-error-layout'
} You can set a custom layout for the error page
</script>
NUXT.JS ESSENTIALS
CHEAT SHEET
NUXT.CONFIG.JS DEPLOYMENT METHODS
For configuring your application
1. SPA (SINGLE PAGE APPLICATION)
export default { Benefit: Organize your project using convention over
css: [ To add global CSS files configuration folder structure and config files. Easy
'bulma/css/bulma.css', development server.
'~/css/main.css'
], To generate static pages from ∙ Change mode in nuxt.config.js to spa.
generate: { dynamic routes, specify them here
• Run npm run build
routes: function () {
• Deploy the created dist/ folder to your static hosting
return [
'/users/1', like GitHub Pages for example.
'/users/2',
'/users/3' 2. STATIC
];
Benefit: All pages get pre-rendered into HTML and have a
}
high SEO and page load score. The content is generated at
},
build time.
loading: '~/components/loading.vue',
head: { Set a custom loading component • Run npm run generate
meta: [ Set HTML Head tags for every page • Deploy the created dist/ folder with all the generated
{ charset: 'utf-8' },
HTML files and folders to your static hosting.
{ name: 'viewport', content:
'width=device-width, initial-scale=1' }
], 3. UNIVERSAL
link: [{ Benefit: Execute your JavaScript on both the client and the
rel: 'stylesheet', server. All routes have high SEO and page load score.
href: 'https://font.com', Dynamically get routes rendered on the server before
}] being sent to client.
},
• Upload the contents of your application to your
transition: { Set the default transition for all pages
name: 'page’, server of choice.
mode: 'out-in' • Run nuxt build to build your application.
},
• Run nuxt start to start your application and start
plugins: ['~/plugins/vue-notifications']
} accepting requests.

RUNNING AND BUILDING

$ nuxt
Launch a development server on Localhost:3000 with hot-reloading
$ nuxt generate
Build the application and generate every route as a HTML file
$ nuxt build
Nuxt.js is an open source project supported by the Build your application for production with webpack and minify assets
community. To sponsor the project, head over to $ nuxt start
Open Collective: opencollective.com/nuxtjs Start the server in production mode

Need help on your path to Vue Mastery? Check out our tutorials on VueMastery.com