# Nuxt.js
# Why Nuxt.js
Nuxt.js is build on top of Vue.js. It's a free and open source project made by Alexandre Chopin (CEO), Sebastien Chopin (CTO) and Pooya Parsa (Head of Framework). It is built for large scale projects. So it's built more modular, and if SEO is a big part of your project, with SSR Support (Server Side Rendering), you can achieve that as well.
On the other hand, if SEO, SSR is not a priority, you can build SPA (Single Page Application) with nuxt. You get the modular directory structure, config, but SSR is not included. (recommended if you have a bigger scale SPA project)
WARNING
If you are starting a very lightweight project, which is SPA, no SEO or SSR in mind, and overall, considered a small project, it is highly recommended to use Vue.js instead, as it’s far superior to Nuxt.js when it comes to handling all that.
# Installation
If you have the latest version of yarn or npm (and why whould you have a different one) it is already shipped with npx, so you can just easily say:
yarn create nuxt-app <project-name>
or
npm init nuxt-app <project-name>
and the installer will start.
WARNING
There is an option called Rendering mode, which determines if the app will be an SPA or a site with SSR.
# Routing
# pages
You do not have to write your own router config, nuxt will do it for you.
Let me show you.
Every file you put in to the pages folder, will be automatically generated to a router.js config file in the .nuxt folder.
So for example this file tree:
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
will automatically generate:
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}
for more complex examples, you can look up this site
# Navigation
In Vue.js we use router-link. We have something similar in Nuxt, called nuxt-link.
<NuxtLink to="/">Home page</NuxtLink>
You can pass parameters and queries
<nuxt-link :to="{name: 'site-name', params: { param-name: 'param' }, query: { query-name: query } }">link</nuxt-link>
or within script
this.$router.push({name: 'site-name', params: { param-name: 'param' }, query: { query-name: query } });
# Nuxt Lifecycle
See the diagram here.
Keep in mind that we have to build our app, and the server that we have SSR. So the Server needs Node.js to accomplish this task.
# Directory structure
We have a pretty nice and modular file structure out of the box, here you can see that as well as what we added later on. All with an explanation.
# .nuxt
This is a build directory. It is dynamically generated and hidden by default. Every time you run yarn dev or yarn build it will be generated.
WARNING
You should always put this folder in to the .gitignore, this should not be commited.
# assets
We use this folder, to put our static images, and our global sass files. The sass files will be imported via the nuxt.config.js file (more on that later)
assets/
--| images/
--| scss/
-----| global.scss
-----| variables.scss
example for an image call from the assets folder:
<img src="@/assets/images/sucom_logo.png" alt="" />
# components
The components directory contains your Vue.js components. Components are what makes up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
if you set
components: true
in your nuxt.config.js file, your components after file creation can be used everywhere and available to be auto imported
components/
TheHeader.vue
TheFooter.vue
<template>
<div>
<TheHeader />
<Nuxt />
<TheFooter />
</div>
</template>
# dist
The dist folder, short for distribution folder. It is dynamically generated when using the nuxt generate command and includes the generated production ready HTML files and assets that are necessary to deploy and run your statically generated Nuxt.js application.
# layouts
Out of the box, we have a default.vue file in it, which is basically the App.vue equivalent in Nuxt if you keep it like this.
<template>
<Nuxt />
</template>
BUT, there is so much more to it. Let's say you have a sites that use a sidebar and ones that don't.
Set the default which is more frequent
default:
<template>
<app-header>
<Nuxt />
<app-footer>
</template>
sidebar:
<template>
<app-header>
<sidebar>
<Nuxt />
<app-footer>
</template>
and call the sidebar layout on your page that requires it
<script>
export default {
layout: 'blog',
// OR
layout (context) {
return 'blog'
}
}
</script>
# middleware
# mixins
We can build global methods, computed properties or anything we want using mixins. just make a global.js file in it with the methods you want to make global, a toast message, if you use an external plugin for this, would be a nice example. Or you can use it for a default pic fallback function for an img tag @error.
export default {
methods: {
showToast: function (message,time) {
this.$root.$toast.open({
message: message,
type: 'default',
position: 'bottom',
duration: time
});
},
default_pic: function(e) {
e.target.src = 'https://www.subotica.com/images/default_pic.png';
e.target.parentElement.classList.add('image__no-pic');
}
},
}
You just have to call it in your layout file like this
import global from '~/mixins/global.js'
Vue.mixin(global);
and you can use your methods like any other local method
try {
await store.dispatch('news/get_news')
await store.dispatch('news/get_news_page', 2)
}
catch(err) {
this.showToast(err);
}
# pages
Here are your different pages you want to use, for example Home, About, Contact etc. Everything you put here, will be automatically generated in to a router.js file in your .nuxt build folder.
You can read more about this on the router section.
# plugins
Every external plugin is stored here, and called in the nuxt.config.js file. For example we want to add a vue toast notification plugin:
vue-toast-notification.js:
import Vue from 'vue';
import VueToast from 'vue-toast-notification';
Vue.use(VueToast);
nuxt.config.js
plugins: [
{ src: '~/plugins/vue-toast-notification' }
],
if you want the plugin to be used only on the client side:
{ src: '~/plugins/vue100vh', mode: 'client' },
# psd
This file is not nuxt specific, it's where we put our psd files. Add this to your .gitignore please
/psd
# repositories
More on that later
# server
This is our creation. If you have to fake an api call, you can do that using a local express server. The steps you need to do:
- Create a server folder (don't forget to put the /server/node_modules in to the gitignore)
- Create a package.json and a server.js file
# Package.json
{
"name": "events-api",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"start": "nodemon server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"nodemon": "^1.19.4"
}
}
# Server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const port = 8000;
app.use(bodyParser.json());
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.get('/', (req, res) => {
res.send(`Hi! Server is listening on port ${port}`)
});
// listen on the port
app.listen(port);
install the packages
npm install
You can start your the server
npm start
example:
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const port = 8000;
app.use(bodyParser.json());
app.use(cors());
app.use(express.urlencoded({ extended: true }));
// DATA
let test = {
"status": "success",
"message": "",
"data": [
{
"id": 1,
"fake_data": "fake 1"
},
{
"id": 2,
"fake_data": "fake 2"
},
{
"id": 3,
"fake_data": "fake 3"
}
]
}
// GET
app.get('/test', (req, res) => {
res.send(test)
});
app.get('/', (req, res) => {
res.send(`Hi! Server is up and running on port: ${port}`)
});
// POST
// listen on the port
app.listen(port);
# static
The static directory is directly mapped to the server root and contains files that likely won't be changed. All included files will be automatically served by Nuxt and are accessible through your project root URL.
# store
The store directory contains our Vuex Store files. The Vuex Store comes with Nuxt.js out of the box but is disabled by default. Creating an index.js file in this directory enables the store.
You can build a more modular Store by creating multiple files. So if you have a blog and an events page for example, you can store the data in different files.
example:
export const state = () => ({
homePage: []
})
export const mutations = {
SET_INDEX(state, data) {
state.homePage = data;
}
}
export const actions = {
async get_index({ commit }) {
const res = await this.$repositories.index.all()
if (res.data.status === 'ok') {
commit('SET_INDEX', res.data)
}
}
}
# File Structure
This is our file structure, for the .vue files and there lifecyclehooks in the script tag.
layout: {},
methods: {},
middleware: {},
validate: {},
asyncData() {},
fetch() {},
computed: {},
data() {},
watch() {},
activated() {},
head() {},
beforeCreate() {},
created() {},
mounted() {},
deactivated() {}
# Configuration
Most of our configuration is in the nuxt.config.js file
# css
We import our global css files like this
// Global CSS (https://go.nuxtjs.dev/config-css)
css: [
'@fortawesome/fontawesome-free/css/all.css',
'@mdi/font/css/materialdesignicons.css',
'vue-toast-notification/dist/theme-default.css',
'~/assets/scss/variables.scss',
'~/assets/scss/global.scss',
],
styleResources: {
scss: [
'~/assets/scss/variables.scss',
'~/assets/scss/global.scss'
]
}
You can add Nuxt.js modules
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
'@nuxtjs/proxy',
'nuxt-webfontloader',
['vue-scrollto/nuxt',{ offset: -96 }],
],
external plugins
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
{ src: '~/plugins/vue-toast-notification' },
{ src: '~/plugins/vue100vh', mode: 'client' },
{ src: '~/plugins/repositories' },
{ src: '~/plugins/filters' },
{ src: '~/plugins/vue-share-buttons', mode: 'client' },
{ src: '~/plugins/ftscroller', mode: 'client' },
{ src: '~/plugins/lightgallery.client.js', mode: 'client' },
{ src: '~/plugins/ckeditor', mode: 'client' },
],
axios with proxy
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {
baseURL: 'https://www.subotica.com/',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
proxy: true,
},
proxy: [
'https://www.subotica.com/mob-app/'
],
custom vuetify config
// Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
vuetify: {
defaultAssets: [{
font: {
family: 'Open Sans'
},
icons: {
iconfont: 'mdi' || 'fa',
},
}]
},
add custom webfonts, from google fonts
webfontloader: {
google: {
families: ['Open+Sans:300,400,600,700,800&display=swap'] //Loads Lato font with weights 400 and 700
}
},
and add default head options
head: {
// titleTemplate: '%s - subotica_com_app',
title: 'SUBOTICA.com - najposećeniji subotički sajt',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
You can read further here and here
# Features
# $loading
Nuxt has a built in loader. Its more like a loading bar at the top of the page. You can set a custom component as a loader
components/loader.vue:
<template>
<div class="loading-page" v-if="loading">
<div class="spinner">
<div class="cube1"></div>
<div class="cube2"></div>
</div>
</div>
</template>
<script>
export default {
data: () => ({
loading: false
}),
methods: {
start() {
this.loading = true
},
finish() {
this.loading = false
}
}
}
</script>
<style lang="scss" scoped>
.loading-page {
position: fixed;
top: 140px;
left: 0;
width: 100%;
height: calc(100% - 140px);
background-color: $c-white;
text-align: center;
z-index: 21;
display: flex;
align-items: center;
justify-content: center;
}
.spinner {
margin: 100px auto;
width: 100px;
height: 100px;
position: relative;
}
.cube1, .cube2 {
background-color: #333;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
animation: sk-cubemove 1.8s infinite ease-in-out;
}
.cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
@-webkit-keyframes sk-cubemove {
25% { -webkit-transform: translateX(60px) rotate(-90deg) scale(0.5) }
50% { -webkit-transform: translateX(60px) translateY(60px) rotate(-180deg) }
75% { -webkit-transform: translateX(0px) translateY(60px) rotate(-270deg) scale(0.5) }
100% { -webkit-transform: rotate(-360deg) }
}
@keyframes sk-cubemove {
25% {
transform: translateX(60px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(60px) rotate(-90deg) scale(0.5);
} 50% {
transform: translateX(60px) translateY(60px) rotate(-179deg);
-webkit-transform: translateX(60px) translateY(60px) rotate(-179deg);
} 50.1% {
transform: translateX(60px) translateY(60px) rotate(-180deg);
-webkit-transform: translateX(60px) translateY(60px) rotate(-180deg);
} 75% {
transform: translateX(0px) translateY(60px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(60px) rotate(-270deg) scale(0.5);
} 100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
</style>
nuxt.config.js:
loading: '~/components/loader.vue',
and you can test it out, on any of your pages like this:
mounted() {
this.$nextTick(() => {
this.$nuxt.$loading.start()
setTimeout(() => this.$nuxt.$loading.finish(), 3000)
})
}
You can find nice loaders over here
# data fetching
# meta tags and SEO
# ssr
← Vue.js