Guide · Open source

How to use Nuxt: create a project, write Vue pages and deploy

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Nuxt is a free, MIT-licensed framework built on Vue.js for creating full-stack web applications and websites. This guide shows you how to create a starter project, how a Vue component looks in Nuxt, and where to go next. It assumes you already know JavaScript and Vue.

Nuxtnuxt/nuxt · ★ 61k · MIT Install options & downloads

Quick start

1Check prerequisites. Make sure you have Node.js installed. The README does not state a version, so confirm the current requirement in the Nuxt docs.
2Create the project. Run npm create nuxt@latest <my-project> in your terminal to generate a starter project with its files and dependencies.
3Open the starter. Move into the project folder created by the command and review the generated files.
4Edit app.vue. Write Vue components in app.vue, using script setup and useSeoMeta to set page metadata.
5Add pages and layout. Use NuxtPage in your template so routed pages render inside your layout.
6Read the docs. Follow the Nuxt documentation at nuxt.com/docs for rendering modes, the server/ directory and deployment.

What you need before you start

Nuxt is built specifically for Vue.js, so you should already be comfortable with Vue components and basic JavaScript. The README says Node.js is required but does not specify a version, so check the official Nuxt documentation for the current requirement before installing.

Working knowledge of JavaScript and Vue.js
Node.js installed on your machine
A terminal to run npm commands

Create a new Nuxt project with npm

Run the following command in your terminal to create a starter project. The README says this creates a starter project with all the necessary files and dependencies. Replace <my-project> with the folder name you want.

If you want to try Nuxt without installing anything locally, the README points to nuxt.new, which opens a Nuxt starter on CodeSandbox, StackBlitz or locally.

npm create nuxt@latest <my-project>

Write Vue components and set page metadata

Nuxt lets you write Vue components in the usual way. The README example shows an app.vue file using script setup with TypeScript. It calls useSeoMeta to set the page title and description, and uses NuxtPage as the placeholder where routed pages render.

Nuxt also auto-imports components, composables and utils, so the example uses useSeoMeta without an explicit import.

Use <script setup lang="ts"> for TypeScript support with no manual configuration, per the README
Call useSeoMeta to define meta tags for search engines
Place <NuxtPage /> where routed pages should appear

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

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

Choose how your pages are rendered

The README lists server-side rendering, static site generation, hybrid rendering and edge-side rendering as supported options. Server-side rendering and static generation are the two that the README links most directly to fast, SEO-friendly sites.

Content-heavy sites are the case the README highlights for these rendering modes. For a simple brochure page, a plain HTML file or lighter tool may be enough.

Server-side rendering (SSR)
Static site generation (SSG)
Hybrid rendering
Edge-side rendering

Add backend code with the server/ directory

Nuxt lets you go full-stack with a server/ directory, so one project can handle both the interface and the server side. The README does not give further details of its contents in this excerpt, so consult the Nuxt documentation for the exact structure.

Extend Nuxt with modules and learn more

The README says Nuxt has over 300 modules listed on nuxt.com/modules, created by the Nuxt team and community. The official documentation at nuxt.com/docs covers everything from getting started to advanced topics, and the README recommends it for leveling up.

Browse the module list at nuxt.com/modules
Read the Nuxt documentation at nuxt.com/docs
Ask questions through the Discord community linked in the README

What people use it for

Content-heavy websites that benefit from server-side rendering or static generation
Full-stack Vue applications that keep interface and server code in one project
TypeScript Vue projects that need no manual configuration, per the README
Sites that add community modules from the 300+ listed on nuxt.com/modules

Frequently asked questions

Is Nuxt free to use?

Yes. The README describes Nuxt as a free and open-source framework, and the project is licensed under MIT. You can read the license file on GitHub for the full terms.

How do I install Nuxt?

The README gives the command npm create nuxt@latest <my-project> to create a new starter project with its files and dependencies. You need Node.js installed first; the README does not state which version.

What do I need to know before learning Nuxt?

The README assumes familiarity with the stack. Nuxt is built for Vue.js, so you should know Vue and JavaScript before starting. Nuxt is not a good first step for people new to JavaScript.

Does Nuxt support TypeScript?

Yes. The README says Nuxt provides TypeScript with zero configuration, and the example app.vue uses lang="ts" in its script setup block.

Is Nuxt better than Next.js?

Nuxt is built for Vue, while Next.js is built for React. The right choice depends on which UI library your team already knows. Other comparable projects include SvelteKit, Astro and Remix.

Can I use Nuxt for a simple static page?

The README's own guidance suggests that simple static pages where plain HTML or a lighter tool would be enough are not the best fit for Nuxt. Nuxt suits projects that need routing, rendering options and a server side.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Nuxt suits developers who already know Vue and want a structured full-stack setup, especially for content-heavy sites that benefit from server-side rendering or static generation. If you do not use Vue, or you only need a simple static page, pick a lighter tool or a framework that matches your existing stack, such as Next.js for React, SvelteKit or Astro.

Install options & downloads