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|