Post created on: 11/16/2020
Nuxt is a Vue-based framework for SSR or Server Side Rendering but it can also be used for static site generation.
Unlike with Vue, you don't need to install a cli tool to scaffold a Nuxt app as long as you have yarn or npm installed it is easy
npx create-nuxt-app APPNAME // OR
yarn create nuxt-app APPNAME
These can be set in pages using the head function (this can only be used in page components) which returns an object e.g.
head() {
return {
title: 'Homepage'
}
}
If this isn't set up on any pages it will default to whatever is included in the config file.
Meta tags use vue-meta under the hood and a full list of supported properties can be found in the docs.
There are multiple ways to style pages in Nuxt.js.
nuxt.config.js
file in the CSS section which will add the styles to all pages e.g. css: [
'~/assets/styles.css'
],
Nuxt uses the Vue Router behind the scenes therefore routing is straightforward in Nuxt whereas in Vue apps you need to set the router and a routes file in Nuxt it is done via the creation of folders and files. Any pages created in the pages folders are automatically saved to the router config file which you can see in the .nuxt folder. If you only have a few pages just creating pages is fine however if you intend on creating a large number of files use a folder structure with an index.vue
<- this is important it needs to be called index.
Dynamic - this can be used with files or folders and uses an underscore e.g. _id.vue
to tell Nuxt that it is dynamic. To access this for example you would use $route.params.id
but this value depends on what your pages so if it is called users it would be $route.params.users
.
If you are using the folder structure important to note whatever this is called will show in routing so this is recommended for sub-routes.
When routing between pages to prevent the generation of many requests you should use <nuxt-link>
this will prevent the default behaviour of generating an additional HTTP request and will instead function in the same way as a Single Page Application.
Layouts are a wrapper for pages which work in the same way as other Vue components and can contain small reusable component e.g. a navbar or footer. The default.vue layout will be used for all of your pages until a custom one is specified using layout property in the script section of your page e.g.
<template>...</template>
export default {
layout: 'blog'
}
An important one to create is an error.vue
file as the name suggests if someone puts in the wrong link this is the page that will show. This is created the layouts folder but it works the same way as any Vue component.
If you would like to get started with learning Nuxt check the great docs and this fundamentals course from Vue School.
asyncData() - important to note this method can be only be used in page components. "this" is not accessible in this method as it is called before the initialisation of the component.
You can use a callback with context, but it is recommended to use either:
The new content module in Nuxt allows the creation of content using markdown
The content module has the following properties: