DEV Community

loading...

Understanding Nuxt & Vue hooks and lifecycle (part 3)

Lili Z
Years and years of Java development. Now building One Stop Beauty Online. Still loads of Java, plus other new toys.
Originally published at tech.onestopbeauty.online on ・2 min read

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

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

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