title: 'Vue.js Development'

description: "Nuxt uses Vue.js and adds features such as component auto-imports, file-based routing and composables for an SSR-friendly usage."

Nuxt integrates Vue 3, the new major release of Vue that enables new patterns for Nuxt users.

The goal of this chapter is to provide a high-level overview of the different parts of the framework, their execution order, and how they work together.

On the server, the following steps are executed for every initial request to your application:

Nuxt is powered by [Nitro](https://nitro.build/), a modern server engine.

- Capture and handle application-wide errors.

- Register hooks that execute when Nitro shuts down.

- Register hooks for request lifecycle events, such as modifying responses.

:read-more{to="/docs/4.x/guide/directory-structure/server#server-plugins"}

After initializing the Nitro server, middleware under `server/middleware/` is executed for every request. Middleware can be used for tasks such as authentication, logging, or request transformation.

:read-more{to="/docs/4.x/guide/directory-structure/server#server-middleware"}

- Built-in plugins, such as Vue Router and `unhead`.

- Custom plugins located in the `app/plugins/` directory, including those without a suffix (e.g., `myPlugin.ts`) and those with the `.server` suffix (e.g., `myServerPlugin.server.ts`).

:read-more{to="/docs/4.x/guide/directory-structure/app/plugins"}

After initializing plugins and before executing middleware, Nuxt calls the `validate` method if it is defined in the `definePageMeta` function. The `validate` method, which can be synchronous or asynchronous, is often used to validate dynamic route parameters.

:read-more{to="/docs/4.x/getting-started/routing#route-validation"}

Middleware allows you to run code before navigating to a particular route. It is often used for tasks such as authentication, redirection, or logging.

:read-more{to="/docs/4.x/guide/directory-structure/app/middleware"}

Nuxt renders the page and its components and fetches any required data with `useFetch` and `useAsyncData` during this step. Since there are no dynamic updates and no DOM operations occur on the server, Vue lifecycle hooks such as `onBeforeMount`, `onMounted`, and subsequent hooks are **NOT** executed during SSR.

Watch a video from Daniel Roe explaining Server Rendering and Global State.

::

After all required data is fetched and the components are rendered, Nuxt combines the rendered components with settings from `unhead` to generate a complete HTML document. This HTML, along with the associated data, is then sent back to the client to complete the SSR process.

Before finalizing and sending the HTML, Nitro will call the [`render:html`](/docs/4.x/api/advanced/hooks#nitro-app-hooks-runtime-server-side) hook. This hook allows you to manipulate the generated HTML, such as injecting additional scripts or modifying meta tags.

::

This part of the lifecycle is fully executed in the browser, no matter which Nuxt mode you've chosen.

This step is similar to the server-side execution and includes both built-in and custom plugins.

:read-more{to="/docs/4.x/guide/directory-structure/app/plugins"}

This step is the same as the server-side execution and includes the `validate` method if defined in the `definePageMeta` function.

Nuxt middleware runs on both the server and the client. If you want certain code to run in specific environments, consider splitting it by using `import.meta.client` for the client and `import.meta.server` for the server.

:read-more{to="/docs/4.x/guide/directory-structure/app/middleware#when-middleware-runs"}

Calling `app.mount('#__nuxt')` mounts the Vue application to the DOM. If the application uses SSR or SSG mode, Vue performs a hydration step to make the client-side application interactive. During hydration, Vue recreates the application (excluding [Server Components](/docs/4.x/guide/directory-structure/app/components#server-components)), matches each component to its corresponding DOM nodes, and attaches DOM event listeners.

After mounting the Vue application, Nuxt calls the [`app:mounted`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) hook.

::

Unlike on the server, the browser executes the full [Vue lifecycle](https://vuejs.org/guide/essentials/lifecycle).