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:



{{ id }}
</div>
template>

πŸ–₯ 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!!