Nuxt Framework

4.4.2 · active · verified Sat Apr 18

Nuxt is a free and open-source framework (currently v4.4.2) that provides an intuitive and extendable way to create type-safe, performant, and production-grade full-stack web applications and websites with Vue.js. It supports server-side rendering, static site generation, automatic routing, data fetching, and zero-configuration TypeScript, with regular minor and patch releases across both v3 and v4 branches.

Common errors

```
npm ERR! EBADENGINE Unsupported engine
```
cause The installed Node.js version does not meet Nuxt's engine requirements.

fix Upgrade Node.js to version `^20.19.0` or `>=22.12.0`.
```
TS2742: The inferred type of '...' cannot be named without a reference to '...' (or other TypeScript type errors related to Node types)
```
cause An incompatible or missing `@types/node` peer dependency is causing type resolution issues.

fix Ensure `@types/node` is installed and updated to a compatible version (e.g., `>=18.12.0`) in your project.
```
Module not found: Can't resolve '...' (or similar build/runtime errors after upgrading)
```
cause Stale or conflicting dependencies due to not deduplicating the lockfile during an upgrade.

fix Run `npx nuxt upgrade --dedupe` to ensure all dependencies are correctly updated and deduplicated.

Warnings

gotcha Nuxt requires a specific Node.js version. Ensure your environment meets the minimum requirements.
Fix: Upgrade Node.js to a compatible version (e.g., `^20.19.0` or `>=22.12.0`).
gotcha Ensure your project's `@types/node` peer dependency is compatible to avoid type conflicts or errors.
Fix: Install or update `@types/node` to a compatible version (e.g., `>=18.12.0`) in your project.
gotcha To ensure all dependencies, especially those from the unjs ecosystem, are correctly updated and deduplicated, use the recommended upgrade command.
Fix: Run `npx nuxt upgrade --dedupe` when updating Nuxt or its related packages.

Install

npm install nuxt npm
yarn add nuxt yarn
pnpm add nuxt pnpm

Quickstart

A basic Nuxt application component demonstrating auto-imported composables (`useSeoMeta`) and core components (`NuxtPage`, `AppHeader`, `AppFooter`) for defining the application's structure and metadata.

<script setup lang="ts">
useSeoMeta({
  title: 'Meet Nuxt',
  description: 'The Intuitive Vue Framework.',
})
</script>

<template>
  <div id="app">
    <AppHeader />
    <NuxtPage />
    <AppFooter />
  </div>
</template>

<style scoped>
#app {
  background-color: #020420;
  color: #00DC82;
}
</style>

view raw JSON →