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!!