Beginner's tips for Nuxt.js [JavaScript/TypeScript]


Nuxt.js is a framework for universal Vue.js Application which supports server side rendering.

๐ŸŽ‚ Lifecycle of Nuxt.js

The following flow is about the server is called in Nuxt.js.



๐Ÿ˜Ž nuxtServerInit

nuxtServerInit is called in server side and client side.

export const actions = {
nuxtServerInit({ commit }, { req }) {
if (req.session && req.session.authUser) {
commit("SET_USER", req.session.authUser);
}
}
};

๐Ÿฎ nuxtClientInit

Custom plugin nuxtClientInit is called only in client side.

./nuxt.config.js

// nuxt.config.js
module.exports = {
plugins: [{ src: '~/plugins/nuxt-client-init.js', ssr: false }]
}

./src/plugins/nuxt-client-init.js

export default async ctx => {
await ctx.store.dispatch("nuxtClientInit", ctx);
};

./src/store/index.js

export const actions = {
nuxtClientInit({ commit, state, dispatch }, { req }) {
if (localStorage.accessToken) {
commit("user/setToken", localStorage.token);
}
}
};

๐Ÿ€ Appendix

Parameter in routing

In template, you can get a parameter like:

<template>
<div>
{{ id }}
</div>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class ProductReportComponent extends Vue {
private id = null;

validate({ params }) {
return /^\d+$/.test(params.id);
}

mounted() {
this.findById(this.$route.params.id);
}
}
</script>

Description of nuxt-link

<nuxt-link> is the same as <router-link>, so we recommend you to see how to use it on the Vue Router documentation.

Add script in head tag

The following code is a sample to add JavaScript in head tag of HTML. If you want to avoid sanitizing, itโ€™s good to set __dangerouslyDisableSanitizers in header object.


<template>
<nuxt />
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class Default extends Vue {
head() {
return {
meta: [
{ charset: "utf-8" },
{ "http-equiv": "X-UA-Compatible", content: "IE=edge" },
{
viewport: "viewport",
content:
"width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no"
}
],
script: [
{
innerHTML:
'!function(t,e){if(void 0===e[t]){e[t]=function(){e[t].clients.push(this),this._init=[Array.prototype.slice.call(arguments)]},e[t].clients=[];for(var r=function(t){return function(){return this["_"+t]=this["_"+t]||[],this["_"+t].push(Array.prototype.slice.call(arguments)),this}},s=["addRecord","set","trackEvent","trackPageview","ready"],n=0;n<s.length;n++){var i=s[n];e[t].prototype[i]=r(i)}var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=("https:"===document.location.protocol?"https:":"http:")+"//s3.amazonaws.com/td-cdn/sdk/td-1.2.0.js";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(a,c)}}("Treasure",this);',
type: "text/javascript",
body: true
}
],
__dangerouslyDisableSanitizers: ["script"]
};
}
}
</script>

๐ŸŽณ References

๐Ÿ–ฅ Recommended VPS Service

VULTR provides high performance cloud compute environment for you. Vultr has 15 data-centers strategically placed around the globe, you can use a VPS with 512 MB memory for just $ 2.5 / month ($ 0.004 / hour). In addition, Vultr is up to 4 times faster than the competition, so please check it => Check Benchmark Results!!