DEV Community

Lili Z
Lili Z

Posted on • Originally published at tech.onestopbeauty.online on

Understanding Nuxt & Vue hooks and lifecycle (part 3)

This is part 3 of mini-series - Understanding Nuxt & Vue hooks and lifecycle - a quick reference table to refresh memory.

If you’ve missed the previous parts:

I’m not adding modules to this table because, as explained in Parts 1 & 2, the module code only gets executed on Nuxt startup. Of course module code might initialise/attach various hooks - but then they’d follow the rules below.

What SSR (1st page) Client (1st page) Client (Next pages) Notes Example usage
beforeCreate ✔️ ✔️ ✔️ Does not have access to component's *this* (does not exist yet) If you're not using Nuxt: getting/preparing any data that is required by the component. With Nuxt, fetch/asyncData is easier
created ✔️ ✔️ ✔️ Has access to component's data, but not DOM (no this.$refs) (in client mode) generate and attach extra styles to document; process data/props with extra logic (could also be in computed prop)
mounted ✔️ ✔️ First hook with access to data and DOM DOM operations, client-side operations such as subscribing to events
plugins (dual mode) ✔️ ✔️ use inject to make plugins available globally globally shared functionality, e.g. this.$user.isLoggedIn (goes to store behind the scenes)
plugins (client) ✔️ use inject to make plugins available globally actions that need to be performed once per visitor (client-side), e.g. setting up authorisation tokens
plugins (server) ✔️ use inject to make plugins available globally actions that need to be performed once per visitor (server-side)
nuxtServerInit ✔️ used for VueX initialisation fetch globally used data, e.g. elements for navigation menu or other configuration from API
middleware ✔️ ✔️ can be attached globally, or just to some pages automatic redirects for certain pages - e.g. when content moved, or if user tries to access protected page when not logged in
asyncData / fetch ✔️ ✔️ only executed for pages, not components fetch data (into store or component) required on certain route

Discussion (2)

Collapse
ozum profile image
Ozum Eldogan • Edited on

Hi Lili,

Great summary of Nuxt lifecycle. You should consider contributing a summary to NuxtJS documentation (nuxtjs.org/guide)

Collapse
minicatscb profile image
minicatsCB • Edited on

Hi, thank you for this table, so useful!
I have a question: what is the difference between "Client (1st page)" and "Client (Next pages)"?