Learn NUXT-JS with Real Code Examples

Updated Nov 22, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Installation Setup

`npx nuxi init my-app`

`cd my-app && npm install`

`npm run dev` to launch dev server

Optional SSR/SPA modes via config

Use VSCode + Volar for Vue support

Environment Setup

Install Node.js

Install Nuxt via nuxi

Use VSCode + Volar

Configure Tailwind/Pinia if needed

Connect database or backend

Config Files

nuxt.config.ts - main config

app.vue - root component

tsconfig.json - TypeScript config

server/api/* - backend logic

assets/ - unprocessed assets

Cli Commands

npx nuxi init - create project

npm run dev - start dev server

npm run build - build for production

npm run preview - preview SSR build

nuxi prepare - generate types

Internationalization

Nuxt i18n module

Locale-based dynamic routing

SSR-friendly language switching

Automatic translation loading

SEO metadata per locale

Accessibility

Semantic Vue components

Keyboard-friendly routing

ARIA through Vue directives

Image alt-text checks

Nuxt Image for accessible media

Ui Styling

TailwindCSS

Vue components

CSS modules

Sass/SCSS

UI frameworks like Vuetify or Naive UI

State Management

Pinia

Vue composables

Server-side state via useState

Vuex (legacy)

Client/server shared composables

Data Management

useAsyncData for SSR fetching

useFetch for client/SSR

Nitro API routes

GraphQL via Apollo/URQL

REST APIs