Framework · Since 2014

Vue.js · Nuxt

Vue.js is a progressive JavaScript framework for building UIs from declarative components; Nuxt adds routing, server rendering and server APIs on top.

Start the guide Discussions

Vue.js is an open-source JavaScript framework for building user interfaces, created by Evan You and first released in 2014. It combines HTML-based templates with reactive state, so the page updates automatically when data changes, and its basic unit is the single-file component (.vue) that keeps template, script and style together. Nuxt is a full-stack framework built on Vue that adds file-based routing, auto-imports, server-side rendering and server APIs powered by the Nitro engine.

Vue can be adopted incrementally, from a single script tag that enhances part of an existing page to a full single-page application built with Vite. It fits interactive screens such as admin panels, dashboards and internal tools particularly well. When search visibility and first-load speed matter, or when you want pages and APIs in one project, Nuxt provides server rendering, static generation and server routes, and deploys to Node.js servers, static hosting and many other targets.

If you are new to Vue, install Node.js and work through the interactive tutorial and the guide on the official site to learn reactivity, components and template syntax. Then scaffold a Vite-based project with npm create vue@latest and build real screens, moving to Nuxt once you need routing conventions and server rendering. Pinia for state management and Vitest for unit tests are the officially recommended companions.

Highlights

Reactive data

State declared with ref, reactive and computed tracks its dependents, so only the parts of the page that use a value are re-rendered when it changes.

Single-file components

Template, script and style live in one .vue file, with scoped styles and TypeScript support out of the box.

Composition API

Related logic is grouped into functions and reused as composables, which keeps large components organized by feature.

Full-stack defaults in Nuxt

File-based routing, auto-imports, server rendering, static generation and API routes in the server folder work without extra configuration.

Where it is used

Single-page applications and admin panels
Server-rendered websites and blogs with Nuxt
Adding interactivity to existing server-rendered pages
Full-stack web services with pages and APIs in one project

Install

1
Set up Node.js
Vue and Nuxt tooling runs on Node.js. Install the LTS release from nodejs.org and confirm that node and npm report their versions.
```
node --version && npm --version
```
2
Create a Vue project
The official scaffolding tool, create-vue, asks whether to add TypeScript, Vue Router, Pinia, Vitest and more. In the new folder, run npm install and npm run dev to start the Vite dev server.
```
npm create vue@latest
```
3
Create a Nuxt project
To use Nuxt, scaffold a project with nuxi. Change into the new folder and run npm run dev; the dev server listens on http://localhost:3000 by default.
```
npx nuxi@latest init my-nuxt-app
```

Your first program

Your first component

src/App.vue is the root component of a create-vue project. The script setup block creates a reactive count with ref(0); the template shows it with double curly braces and increments it on every click through @click. When count changes, Vue re-renders only what depends on it. With npm run dev running, saving the file updates the browser instantly.

src/App.vue

<script setup lang="ts">
import { ref } from "vue";

const count = ref(0);
</script>

<template>
  <h1>Hello, Vue!</h1>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

npm create vue@latest hello-vue && cd hello-vue && npm install && npm run dev

Everyday tools

Vite: The default dev server and build tool for Vue projects, offering fast hot module replacement and optimized production builds. Nuxt uses it under the hood.
Pinia: The official state management library for Vue. It defines shared state as stores, with full TypeScript inference and DevTools integration.
Vue DevTools: A debugging tool for inspecting the component tree, state, Pinia stores and routes, available as a browser extension or a Vite plugin.
Vue - Official: The official VS Code extension (formerly Volar), providing syntax highlighting, completion and template type checking for .vue files.

Step-by-step guide

Six chapters that take you from installation to the core ideas of Vue.js · Nuxt.

Official docs and resources

Languages

Discussions

Start a discussion

Ask questions, share experience and trade opinions about Vue.js · Nuxt.

No discussions yet. Start the first one.