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:
- Part 1 here - which explains each of the mechanisms in more details,
- Part 2 here - which shows each of the mechanisms on an example app,
- Quick guide to Vue and Nuxt from Java dev PoV.
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 |
Top comments (2)
Hi Lili,
Great summary of Nuxt lifecycle. You should consider contributing a summary to NuxtJS documentation (nuxtjs.org/guide)
Hi, thank you for this table, so useful!
I have a question: what is the difference between "Client (1st page)" and "Client (Next pages)"?