Getting Started with Vue and Nuxt

This chapter walks through preparing Node.js, scaffolding a Vue project with create-vue and a Nuxt project with nuxi, and running the dev server. It also covers editor setup. Keep the relationship in mind: Vue is the UI framework, and Nuxt is a full-stack framework that adds routing conventions, server rendering and server APIs on top of it.

Prepare Node.js

All Vue and Nuxt tooling runs on Node.js. Install the LTS release from nodejs.org and check the versions. npm ships with Node.js, but pnpm, Yarn and Bun work just as well.

node --version
npm --version

Scaffold a Vue project with create-vue

The official scaffolding tool for Vue is create-vue. It generates a project that uses Vite as its build tool and asks a few questions along the way.

npm create vue@latest

The prompts look roughly like this. For a first project, TypeScript, Vue Router, Pinia and Vitest are good choices; everything else can be added later.

Once the project exists, install the dependencies and start the dev server.

cd my-vue-app
npm install
npm run dev

Open the address printed in the terminal (by default http://localhost:5173) to see the starter page. The Vite dev server supports hot module replacement (HMR): when you save a .vue file, the change appears without a full reload, and component state is usually preserved.

Edit your first component

Open src/App.vue and replace its contents with the following. Anything declared inside <script setup> (variables, functions, imported components) is available directly in the template.

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

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

<template>
  <h1>Hello, {{ name }}!</h1>
  <input v-model="name" />
  <button @click="count++">Clicked {{ count }} times</button>
</template>

Typing in the input updates the heading, and clicking the button increments the number. You only changed data, and the page followed along: that is Vue's reactivity at work.

Scripts in package.json

The names you pass to npm run are defined under scripts in package.json. A TypeScript project created with create-vue contains roughly the following, plus test:unit, test:e2e or lint depending on the features you selected.

{
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build"
  }
}

dev starts the dev server, build runs type checking and the production build, and preview serves the build output locally. Script names vary between projects, so this section is a good first stop whenever you open an unfamiliar codebase.

Scaffold a Nuxt project with nuxi

If you know you need server rendering, file-based routing or server APIs, you can start with Nuxt right away. Nuxt's command-line tool, nuxi, creates the project; npm create nuxt@latest does the same thing.

npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm run dev

The Nuxt dev server listens on http://localhost:3000 by default. If you pick a package manager during setup, dependencies are installed for you. These nuxi commands come up often:

npx nuxi dev                # start the dev server
npx nuxi build              # production build
npx nuxi generate           # generate a static site
npx nuxi module add pinia   # add a module (Pinia here)

Editor setup

In VS Code, install the official Vue - Official extension (formerly Volar). It provides syntax highlighting, completion and type checking inside templates for .vue files. In the browser, Vue DevTools lets you inspect the component tree, state and Pinia stores. In a create-vue project you can also run checks from the terminal:

npm run type-check   # type-check .vue files with vue-tsc
npm run lint         # if you selected ESLint

Summary

• Vue and Nuxt tooling runs on a Node.js LTS release.
• npm create vue@latest scaffolds a Vite-based Vue project; npm run dev starts it.
• npx nuxi@latest init scaffolds a Nuxt project whose dev server uses port 3000 by default.
• The Vue - Official extension in your editor and Vue DevTools in your browser make day-to-day work much easier.