Getting Started with Vue.js: A Beginner’s Guide

For a new Vue app, use the official create-vue scaffold. It creates a Vue 3 project powered by Vite, with a development server and the usual .vue Single-File Component workflow. You need command-line basics and a supported Node.js version: ^22.18.0 or >=24.12.0, according to the Vue Quick Start.

Vue is a JavaScript framework for building user interfaces on top of standard HTML, CSS, and JavaScript. Prior experience with another framework is useful, but not required; the official learning material expects familiarity with those web basics. [Vue introduction]

1. Create and run a Vue project

Open a terminal in the directory where you keep projects and run:

npm create vue@latest

The command starts the interactive create-vue setup. Enter a project name, then choose whether to include optional tools such as TypeScript, JSX, Vue Router, Pinia, Vitest, an end-to-end testing solution, ESLint, Prettier, and Vue DevTools. If you are not sure what you need yet, accepting the defaults is a sensible start. [Vue Quick Start]

Move into the directory you created, install dependencies, and launch the local development server:

cd my-vue-app
npm install
npm run dev

Replace my-vue-app with the project name you entered. The terminal prints the local address to open in a browser. Keep the development server running while you edit; stop it with Ctrl+C.

Use another package manager

The scaffold supports common JavaScript package managers. Use the matching create, install, and run commands for the package manager your project uses. For example, if you use pnpm, the corresponding commands are:

pnpm create vue@latest
cd my-vue-app
pnpm install
pnpm dev

For Yarn or Bun, follow the prompts and generated package.json scripts, which show the commands available to that project.

2. Understand the starter project

The scaffold creates a Vite-based project and demonstrates Vue Single-File Components. A component commonly lives in a .vue file, where its template, JavaScript logic, and styles can be kept together. The starter uses the Composition API with <script setup>.

Start by exploring the generated files rather than deleting them all at once:

src/ holds the application source and components.
src/main.js (or src/main.ts when using TypeScript) starts the app and attaches it to the page.
src/App.vue is the root component and a good place to make your first change.
index.html is the page shell Vite uses to load the app.
package.json lists dependencies and scripts such as dev and build.

Exact starter files can vary with the options you chose. Read the generated code and scripts as the source of truth for your project.

3. Learn Vue’s core ideas with a small component

Vue templates let you describe the interface with HTML-like markup, while reactive state keeps the displayed content in sync with your JavaScript. Here is a small component you can put in src/App.vue:

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <main>
    <h1>A first Vue app</h1>
    <p>Count: {{ count }}</p>
    <button @click="count++">Add one</button>
  </main>
</template>

<style>
main {
  font-family: system-ui, sans-serif;
  margin: 3rem auto;
  max-width: 36rem;
}

button {
  padding: 0.5rem 0.75rem;
}
</style>

ref(0) creates a reactive value. In the template, Vue unwraps that value so you can display it as {{ count }} and update it in the click handler with @click. In JavaScript code outside the template, read or update a ref through its .value property.

This example illustrates the basic cycle: state changes, Vue notices the change, and the rendered interface updates. Continue by learning templates, reactivity, and how to split an interface into reusable components. The official interactive tutorial is a hands-on starting point; it is not a replacement for the full guide.

4. Choose the right Vue setup

Your situation	Good starting point	Trade-off or caveat
Building a new app locally	`create-vue` with Vite	Requires Node.js and package-manager setup; supports the standard Single-File Component workflow.
Adding a small interactive feature to static HTML or a backend-rendered page	Load Vue from a CDN	No build step, but this setup does not support Single-File Component syntax.
Considering Vue CLI for a fresh project	Prefer Vite and `create-vue`	Vue CLI is in maintenance mode. Use it when a project constraint specifically calls for its webpack-based setup.
Unsure whether you need TypeScript, tests, routing, or state management	Start with the scaffold defaults	Add options later as the application’s needs become clear.

For server-side rendering or other framework features, Vue’s Quick Start suggests considering a framework such as Nuxt. If you do not need SSR, a direct Vite setup is a simpler starting point. The Quick Start also lists Vike, Astro, and Quasar as Vue framework options. Choose a framework to meet a project need, rather than adding one before you know you need its features. [Vue Quick Start]

CDN alternative for an existing page

If you want Vue to enhance a static page or work alongside a backend-rendered site, you can load Vue from a CDN without a build system. This is a reasonable way to add a small interactive area. It is not the recommended path for a conventional new app that uses .vue files, because the CDN approach does not provide Single-File Component syntax. Follow the current official CDN instructions for the correct script URL and import-map setup.

5. Set up your editor and learning path

For a beginner-friendly editor setup, the Vue tooling guide recommends Visual Studio Code with the Vue – Official extension. WebStorm is also supported. Vue DevTools is optional: it can help inspect the component tree and component state, review state-management events, and profile performance. [Vue tooling guide]

Try the browser-based tutorial to see templates and reactivity in action.
Scaffold a small local app with npm create vue@latest.
Learn templates, reactivity, and components in the Vue guide, changing one small part of the starter app at a time.
Return to the guide and examples as your application grows. Add routing, shared state, tests, or TypeScript when there is a concrete need.

The Vue Quick Start also links to an optional interactive Scrimba tutorial for running, editing, and deploying a first app. Treat it as another learning resource, not a required step. [Vue Quick Start]

6. Build for production

When you are ready to create a deployable build, run the generated build script:

npm run build

The production output goes into dist. The development server is for local development; npm run dev does not deploy the application. Follow the official deployment guide for hosting and deployment details. [Vue Quick Start]

7. Screenshot a Vue page while you build

When documenting a Vue app, reviewing a rendered page, or generating a preview, a screenshot API can capture the page from a URL. After starting the development server, make sure the page is reachable by the capture service; a local-only address may not be accessible outside your machine.

Or skip the browser setup

ScreenshotNeo takes a screenshot with one GET request. Its API accepts a URL and returns an image or PDF. See the ScreenshotNeo API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers show the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. Every plan includes every feature: 1,000 screenshots a month are free with no card, and paid plans start at $5 for 3,000. [ScreenshotNeo](https://screenshotneo.com)

8. Troubleshooting common setup issues

Symptom	Likely cause	What to do
The scaffold command fails or reports an unsupported Node version	Your installed Node.js version is outside the Quick Start’s supported range.	Install Node.js `^22.18.0` or `>=24.12.0`, then rerun `npm create vue@latest`.
`npm run dev` says the script is missing	You may be in the wrong directory, or dependencies were not installed.	Change into the generated project directory, run `npm install`, and check the scripts in `package.json`.
The browser cannot open the development address	The dev server may have stopped, or you opened a different address than the one printed in the terminal.	Run `npm run dev` again and use the exact local URL it reports.
A `.vue` file does not render when added to a plain HTML page	Single-File Components require the build tooling used by the Vite scaffold; the simple CDN integration does not compile them.	Use the Vite project for `.vue` files, or rewrite the small enhancement using the CDN-supported approach.
An editor shows unfamiliar template or component warnings	Vue language support may not be installed or enabled.	Install and enable the Vue – Official extension in VS Code, then reopen the project.
The app works locally but a production build has errors	Development and production builds can expose different issues, or type checks may not be part of Vite’s transpilation.	Run the project’s build script before deployment and resolve its reported errors. For TypeScript in Vue SFCs, use the recommended IDE feedback and `vue-tsc` for command-line type checking as needed.

9. Performance, reliability, and cost considerations

Keep the first project small. Start with the scaffold defaults and add router, shared state, tests, and other tooling as the application needs them. This keeps configuration manageable while you learn.
Type checking is separate from transpilation. Vite transpiles TypeScript but does not perform type checking by itself. For Vue Single-File Components with TypeScript, the Vue guide recommends IDE feedback and identifies vue-tsc for command-line type checking and declaration generation. [Vue TypeScript guide]
Check a production build before shipping. Run npm run build and deploy the generated dist output according to your hosting setup. The development server is not a production deployment method.
Vue setup costs depend on your project choices. The Vue guide presents the framework and its setup path without a required paid tool. CDN use avoids a build step for small enhancements, while a local Vite project requires Node.js and dependency installation. No adoption or performance benchmark is needed to choose between these paths.
Screenshot capture has separate service costs. If you use ScreenshotNeo for screenshots, its free tier includes 1,000 shots per month without a card; paid plans start at $5 for 3,000. Only clean shots are billed, per the product details above.

10. FAQ

Do I need to know React or another framework first?

No. Basic HTML, CSS, JavaScript, and command-line familiarity are the relevant starting knowledge for the official learning material.

Should I learn the Options API or Composition API first?

The scaffold demonstrates the Composition API with <script setup>. Start by understanding the style shown in your generated project, then explore other Vue patterns through the guide when you encounter them.

Can I use Vue without installing Node.js?

For a small enhancement to an existing page, Vue can be loaded from a CDN without a build step. The conventional local app workflow with Vite requires Node.js.

Does the starter project automatically go online?

No. The dev server runs locally, and the build command produces files in dist. You still need to deploy those files using a hosting or deployment workflow.

Where should I go after the first app runs?

Continue with the official guide’s sections on templates, reactivity, and components, then add project tools when they solve a specific need.