Getting started with Vue 3: building your first app with Vite

What is Vue?

Vue is a JavaScript framework for building user interfaces. It is progressive: you can use it to add a bit of interactivity to a single page, or to build a full Single Page Application (SPA) with routing and state management.

Vue is built around two core ideas:

• Declarative rendering: you write a template that describes what the UI should look like based on your data, instead of manipulating the DOM element by element.
• Reactivity: when data changes, Vue tracks which parts of the UI depend on it and updates them automatically.

This article uses Vue 3 with the Composition API and the <script setup> syntax, which is the recommended approach for new projects.

Setting up a project

Make sure a currently supported (LTS) version of Node.js is installed. Check it with:

node -v
npm -v

Create a new project with create-vue, the official scaffolding tool built on Vite:

npm create vue@latest

The command asks a few questions: project name, TypeScript, Vue Router, Pinia, Vitest, ESLint, and so on. For learning purposes you can answer "No" to all the optional features. When it finishes:

cd my-project
npm install
npm run dev

Vite starts a development server at an address like http://localhost:5173. Every time you save a file, the change appears in the browser immediately thanks to Hot Module Replacement (HMR).

Folder structure

The generated project looks roughly like this:

my-project/
├── index.html
├── package.json
├── vite.config.js
├── public/
└── src/
    ├── main.js
    ├── App.vue
    ├── assets/
    └── components/

index.html is the page entry point, while src/main.js creates the Vue application and mounts it on the #app element:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Anatomy of a Single File Component

Files ending in .vue are called Single File Components (SFCs). A single file holds the logic, template, and styles of one component.

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

const name = ref('Diary Coding')
const clickCount = ref(0)

function increment() {
  clickCount.value++
}
</script>

<template>
  <section class="card">
    <h1>Hello, {{ name }}!</h1>
    <p>The button has been clicked {{ clickCount }} times.</p>
    <button type="button" @click="increment">Click me</button>
  </section>
</template>

<style scoped>
.card {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: #f1f5f9;
}
</style>

A few things to notice:

• In a <script setup> block, every top-level variable and function is automatically available in the template.
• ref(0) creates a reactive value. Inside the script you access it through .value; in the template you simply write {{ clickCount }}.
• @click is shorthand for v-on:click.
• The scoped attribute on <style> makes the CSS apply to this component only.

Splitting the UI into components

A component can be used inside another component simply by importing it. Suppose the code above is saved as src/components/GreetingCard.vue:

<script setup>
import GreetingCard from './components/GreetingCard.vue'
</script>

<template>
  <main>
    <GreetingCard />
    <GreetingCard />
  </main>
</template>

Each instance has its own state, so clicking the first card does not affect the second.

Options API or Composition API?

Vue offers two authoring styles. The Options API groups code by type (data, methods, computed), while the Composition API groups code by feature. Both are fully supported in Vue 3. The Composition API is more flexible for large components, easier to reuse through composables, and has better TypeScript support. If you come across an older tutorial that uses export default { data() { ... } }, that is the Options API.

Building for production

When the app is ready to ship, run:

npm run build
npm run preview

build produces optimized static files in the dist/ folder, and preview serves them locally so you can check the build before uploading it to your hosting.

Tips for beginners

• Install the Vue - Official extension in VS Code for syntax highlighting, autocomplete, and type checking inside templates.
• Install Vue DevTools in your browser to inspect the component tree and state live.
• Start with small components, then compose them into larger pages.

Exercise

Add a "Reset" button that sets clickCount back to zero, then show the text "That's a lot!" when the click count reaches 10 or more using v-if.