Comprehensive Guide to Setting Up Nuxt 3 with SSR, Routing, Layouts, Components, Plugins, and More

In this tutorial the author walks through the release of the stable Nuxt 3 version and demonstrates how to build a server‑side rendered (SSR) application using the framework.

Understanding SSR

Server‑Side Rendering (SSR) generates the HTML of a page on the server, sends it to the browser, and then hydrates it with Vue to become fully interactive. This improves first‑page load speed and SEO friendliness.

Nuxt 3 Overview

Nuxt 3 is rebuilt on Vite, Vue 3, and Nitro, offering first‑class TypeScript support, a lighter core, and many new features such as faster builds, hybrid rendering, Suspense, Composition API, a powerful CLI, devtools, and built‑in support for Webpack 5, Vite, and Pinia.

Project Initialization

First, ensure Node >= 16.11 and a package manager (pnpm >= 7.x). Then run: npx nuxi init first-nuxt-app Install dependencies with your preferred manager:

cd first-nuxt-app
# yarn
yarn install
# npm
npm install
# pnpm
pnpm install

If using pnpm, create a .npmrc file with: shamefully-hoist=true Start the development server: pnpm run dev Open http://localhost:3000/ in a browser.

Project Structure

Create a src directory and move app.vue into it. Update nuxt.config.ts:

export default defineNuxtConfig({
  srcDir: 'src/',
})

Add a src/pages folder with index.vue as the homepage:

<template>
  <div>
    <h1>Welcome to the first page</h1>
  </div>
</template>

Modify src/app.vue to use the Nuxt page outlet:

<template>
  <div>
    <NuxtPage />
  </div>
</template>

Routing

Static routes are created by adding Vue files under src/pages. For example, src/pages/list.vue creates the /list route. Use <NuxtLink to="/list">Enter List</NuxtLink> for navigation.

Dynamic routes use bracketed folder names. Create src/pages/[id]/index.vue to handle URLs like /123 where id is a variable.

Layouts

Create a src/layouts folder with default.vue for a global layout:

<template>
  <div>
    <h1>Default layout header</h1>
    <slot />
  </div>
</template>

Wrap pages with the layout in src/app.vue:

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

Components

Place reusable components in src/components. Nuxt 3 auto‑imports them, so you can use <ListItem /> without explicit imports.

<template>
  <ul>
    <li><NuxtLink to="/111">111</NuxtLink></li>
    ...
  </ul>
</template>

Plugins

Plugins are loaded from src/plugins. Example of a custom directive:

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('focus', {
    mounted(el) { el.focus() },
    getSSRProps(binding, vnode) { return {} }
  })
})

Composables (Hooks)

Create reusable composables in src/composables. Example:

export const useFoo = () => {
  return useState('foo', () => 'bar')
}

Use it in a page:

<script setup>
  const foo = useFoo()
</script>

State Management with Pinia

Install Pinia and add it to nuxt.config.ts modules:

export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
})

Define a store:

import { defineStore } from 'pinia'
export const useUserStore = defineStore('userInfo', () => {
  const userInfo = reactive({ userName: '易师傅', id: 1, sex: '男' })
  return { userInfo }
})

Consume the store in a component:

<script setup lang="ts">
import { useUserStore } from '@/stores'
const userInfo = useUserStore().userInfo
</script>

VueUse Integration

Install @vueuse/nuxt and add it to modules. Then you can use utilities like useMouse() directly:

<script setup lang="ts">
  const { x, y } = useMouse()
</script>
<template>
  <div>pos: {{ x }}, {{ y }}</div>
</template>

CSS/SCSS Configuration

Install sass and create src/assets/styles/default.scss with variables. Add the file globally via nuxt.config.ts:

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/styles/default.scss";'
        }
      }
    }
  }
})

Use the variables in component styles:

<style lang="scss">
body {
  background-color: $bgColor;
  color: $theme;
}
</style>

Conclusion

The article demonstrates that Nuxt 3 is a solid choice for building SSR‑enabled frontend applications, covering project scaffolding, routing, layouts, components, plugins, state management, utility libraries, and styling.