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:
- 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 |
Comments