Understanding Nuxt & Vue hooks and lifecycle (part 3)
Tags: vue, nuxt, javascript
Published: 2019-07-19 10:24:06

---
title: Understanding Nuxt & Vue hooks and lifecycle (part 3)
published: true
tags: vuejs,nuxt,javascript
canonical_url: https://tech.onestopbeauty.online/front-end/understanding-nuxt-vue-hooks-and-lifecycle-part3/
---

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](https://dev.to/lilianaziolek/understanding-nuxt-vue-hooks-and-lifecycle-part-1-48lc) - which explains each of the mechanisms in more details,
- [Part 2 here](https://dev.to/lilianaziolek/understanding-nuxt-amp-vue-hooks-and-lifecycle-part-2-mmc) - which shows each of the mechanisms on an example app,
- [Quick guide to Vue and Nuxt from Java dev PoV](https://dev.to/lilianaziolek/a-super-quick-guide-to-vuejs-ecosystem-from-senior-java-dev-point-of-view-1kmo).

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 | :heavy\_check\_mark: | :heavy\_check\_mark: | :heavy\_check\_mark: | 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 | :heavy\_check\_mark: | :heavy\_check\_mark: | :heavy\_check\_mark: | 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 | :x: | :heavy\_check\_mark: | :heavy\_check\_mark: | First hook with access to data and DOM | DOM operations, client-side operations such as subscribing to events |
| plugins (dual mode) | :heavy\_check\_mark: | :heavy\_check\_mark: | :x: | use inject to make plugins available globally | globally shared functionality, e.g. this.$user.isLoggedIn (goes to store behind the scenes) |
| plugins (client) | :x: | :heavy\_check\_mark: | :x: | 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) | :heavy\_check\_mark: | :x: | :x: | use inject to make plugins available globally | actions that need to be performed once per visitor (server-side) |
| nuxtServerInit | :heavy\_check\_mark: | :x: | :x: | used for VueX initialisation | fetch globally used data, e.g. elements for navigation menu or other configuration from API |
| middleware | :heavy\_check\_mark: | :x: | :heavy\_check\_mark: | 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 | :heavy\_check\_mark: | :x: | :heavy\_check\_mark: | only executed for pages, not components | fetch data (into store or component) required on certain route |