Mastering Nuxt.js SSR: From Setup to Advanced Features

As Vue adoption grows, many pages use client‑side rendering, improving development quality and efficiency but causing slow first‑paint and poor SEO. Nuxt.js, a Vue SSR framework, delivers server‑rendered pages with front‑back end isomorphism, solving these issues without sacrificing productivity.

1. Nuxt.js Introduction

Nuxt.js is a modular, easy‑to‑use SSR framework for Vue, praised by the Vue core team. It offers strong performance and active community support since its 1.0.0 release in January 2018.

2. Building an SSR Model

Nuxt.js leverages vue-server-renderer to generate HTML on the server. The basic steps are: npm install vue vue-server-renderer --save-dev Create the project structure as shown below.

Write server code in server.js (see image).

In template.html include the placeholder <!--vue-ssr-outlet--> where rendered content will be injected.

Run node server.js to start the service.

Open http://localhost:3100/; the page will show data-server-rendered="true", confirming SSR.

3. Creating a Nuxt.js Project

Ensure npx is installed (included with npm ≥5.2.0).

Run npx create-nuxt-app <project-name>.

Install dependencies with npm install (or yarn).

Start development server with npm run dev.

After these steps, open http://localhost:3000 to see the default Nuxt app. The generated directory layout looks like this:

The official documentation also provides a full request‑to‑render flow diagram:

4. Nuxt Routing Mechanism

Every Vue component placed in the pages directory automatically becomes a route based on its file name and folder hierarchy. Nuxt generates the routing configuration (visible in .nuxt/router.js).

Nested routes are created by adding a Vue file and a same‑named folder for child components. Dynamic and nested routes are also supported as described in the official guide.

5. Assets and Static Resources

assets holds uncompiled resources processed by webpack, while static maps files directly to the site root. Example usage:

Asset: <img src="~/assets/timg.jpeg"> Static:

<img src="timg.jpeg">

6. Layouts

Create a layout file (e.g., admin-layout.vue) in the layouts directory:

Set the layout for a page by adding layout: 'admin-layout' in the page component's script:

export default { layout: 'admin-layout' }

Nuxt also provides a default error layout; you can override it by creating error.vue.

7. Middleware

Middleware functions run before rendering a page or layout, receiving a context object with server and client information. They are useful for authentication checks or redirects.

Example: create middleware/auth.js and register it in nuxt.config.js:

8. Plugins

Plugins run before the Vue app is instantiated. They can be custom libraries or third‑party modules such as Axios or Element‑UI.

Example: add plugins/element-ui.js and configure it in nuxt.config.js (set ssr: false for client‑only plugins).

9. nuxt.config.js Configuration Options

head : default meta tags.

css : global styles or third‑party CSS.

dev : development vs. production mode.

loading : customize the loading component.

env : define environment variables for client and server.

For more details, refer to the official Nuxt.js documentation.