Vue.js Tutorial for Beginners in 2026: Build Your First App in a Day

Vue.js has always been the framework that makes developers smile. Where React asks you to learn JSX and think in hooks, and Angular demands an architecture degree before writing a single button — Vue just works. You write HTML, you write JavaScript, you see results. That approachability is not a beginner crutch. It is a design principle that carries through to production-scale applications.

In 2026, Vue 3 has fully matured. The ecosystem is stable, Vite is the universal build tool, Pinia has replaced Vuex, and Nuxt 3 has become one of the best full-stack frameworks in the JavaScript world. If you have been waiting for Vue to "settle down" before learning it — that time is now.

This tutorial will take you from zero to a working Vue 3 application in a single day. We will cover everything: setup, core reactivity, components, routing, state management, data fetching, and a real project you can add to your portfolio.

What Vue.js Is and Why Developers Love It

Vue.js is a progressive JavaScript framework for building UIs that starts with a single script tag and scales to full-stack SSR applications — it achieves this range while maintaining #1 developer satisfaction in the State of JS 2025 survey, 4.6 million weekly npm downloads, and documentation quality that is widely regarded as the best in the frontend framework world.

Vue.js is a progressive JavaScript framework for building user interfaces. Created by Evan You in 2014 after he worked on AngularJS at Google, Vue was designed to take the good parts of Angular and strip away the complexity. The result is a framework that starts simple and scales gracefully.

"Progressive" means you can adopt Vue incrementally. You can drop a single <script> tag onto an existing HTML page and use Vue for one widget — no build step, no bundler, no configuration. Or you can build an enterprise application with hundreds of components, server-side rendering, and a full TypeScript setup. Vue supports both extremes and everything in between.

Developers love Vue for three concrete reasons:

• Gentle learning curve. The single-file component format (template + script + style in one .vue file) maps directly to how HTML developers already think. You do not need to learn a new language or a new mental model from day one.
• Excellent documentation. The Vue docs are widely considered the best in the frontend framework world. They are clear, complete, have live examples, and explain the "why" behind decisions — not just the "what."
• Sensible defaults with power on demand. Vue's Options API makes simple components trivially easy to write. When you need more control, the Composition API gives you the full power of reactive programming without forcing it on beginners.

Vue 3 vs Vue 2: The Only Version That Matters Now

Vue 2 reached End of Life on December 31, 2023 and receives no security patches, bug fixes, or new features — if you are learning Vue in 2026 you are learning Vue 3, which is approximately 55% faster than Vue 2, has first-class TypeScript support, uses Pinia for state management instead of Vuex, and builds with Vite instead of webpack-based Vue CLI.

Vue 2 reached End of Life on December 31, 2023. It no longer receives security patches, bug fixes, or new features. If you are learning Vue in 2026, you are learning Vue 3. Full stop.

That said, it is worth understanding what changed, because you will encounter Vue 2 code in legacy projects and Stack Overflow answers:

Vue 3's rewritten virtual DOM delivers measurably faster rendering. The script setup syntax for the Composition API is dramatically more concise than the Options API for complex components. And native TypeScript support makes Vue 3 viable for large-scale enterprise development in a way Vue 2 never was.

Vue vs React vs Angular: When Vue Wins

Vue wins on developer experience — gentler learning curve than React or Angular, cleaner single-file component format, and the best framework documentation in the frontend world; React wins on U.S. job market volume (60% of frontend listings vs Vue's 15-20%); Angular wins in large enterprise environments requiring strict TypeScript and a full opinionated framework; Vue is the correct choice when learning speed, code readability, or Laravel/PHP integration is the priority.

This is the question every new frontend developer asks. The honest answer: React has the biggest job market, Angular has the deepest enterprise footprint, and Vue has the best developer experience. Here is the full picture:

Vue wins when: you are a beginner who wants fast results without confusion; you are building a product with a small team; you need to add interactivity to an existing server-rendered site without a full rewrite; or you simply prefer writing HTML templates over JSX.

React wins when: maximum job market optionality is the priority, you are joining a large team that already uses it, or you need the deepest possible ecosystem of third-party component libraries.

Angular wins when: you are building a large enterprise application with strict architectural requirements and a team of ten or more developers who prefer strong conventions over flexibility.

Setting Up Vue: Vite, Vue CLI, or CDN

The recommended Vue 3 setup is Vite — run npm create vue@latest for a full project with TypeScript, Vue Router, Pinia, and Vitest preconfigured in one command; use the CDN script tag approach only for quick prototypes or adding Vue to an existing HTML page; avoid the legacy Vue CLI which uses a slower webpack-based build pipeline that Vite has fully replaced.

Option 1: Vite + Vue (Recommended for New Projects)

Vite is the official build tool for Vue and the fastest way to start a modern project. It uses native ES modules and only transforms code on demand, making development server startup nearly instant.

# Create a new Vue 3 project with Vite
npm create vue@latest my-app

# Follow the prompts — select TypeScript, Vue Router, Pinia as needed
# Then:
cd my-app
npm install
npm run dev

The create vue scaffolder will ask you whether to include TypeScript, JSX support, Vue Router, Pinia, ESLint, and Prettier. For a beginner project, accept TypeScript, Vue Router, and Pinia. Skip the rest for now.

Option 2: CDN for Quick Experiments

For rapid prototyping or adding Vue to an existing HTML page without a build step, the CDN approach works beautifully:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <p>{{ message }}</p>
  <button @click="count++">Clicked {{ count }} times</button>
</div>

<script>
  const { createApp, ref } = Vue
  createApp({
    setup() {
      const message = ref('Hello Vue 3!')
      const count = ref(0)
      return { message, count }
    }
  }).mount('#app')
</script>

Core Vue 3 Concepts: Options API vs Composition API

Vue 3 offers two APIs: the Options API organizes logic into fixed sections (data, methods, computed, watch) which is easier to read at a glance for simple components; the Composition API with <script setup> lets you organize by feature, enables TypeScript without awkward class syntax, and powers composables for code reuse — use Options API to learn, Composition API with script setup for everything you write professionally.

Vue 3 ships with two ways to write component logic. Both work. Both are valid. The difference is in organization, reusability, and TypeScript friendliness.

Options API — The Classic Approach

The Options API organizes code by type — all your data in one block, all your methods in another, all your computed properties in a third. It is immediately readable for anyone who knows HTML and basic JavaScript:

<script>
export default {
  data() {
    return {
      count: 0,
      name: ''
    }
  },
  computed: {
    doubled() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  },
  mounted() {
    console.log('Component is mounted')
  }
}
</script>

Composition API — The Modern Approach

The Composition API organizes code by feature — all the logic for a single piece of functionality lives together. This makes code vastly easier to extract into reusable composables and to type with TypeScript:

<script setup>
import { ref, computed, watch, onMounted } from 'vue'

// ref() for primitive reactive values
const count = ref(0)
const name = ref('')

// computed() for derived values
const doubled = computed(() => count.value * 2)

// Regular function for methods
function increment() { count.value++ }

// watch() for side effects
watch(count, (newVal, oldVal) => {
  console.log(`count changed from ${oldVal} to ${newVal}`)
})

// Lifecycle hooks are imported functions
onMounted(() => console.log('Component is mounted'))
</script>

Notice that script setup eliminates the need to return anything — everything declared at the top level is automatically available in the template. This is the recommended syntax for all new Vue 3 code.

reactive() vs ref()

Both create reactive state. The difference is what they wrap:

• ref() — Wraps any value (primitive or object). Access the value via .value in JavaScript, but directly in templates (Vue unwraps it automatically).
• reactive() — Wraps objects only. No .value needed — properties are accessed directly. Cannot be destructured without losing reactivity.

The practical rule: use ref() for everything. It is more consistent, works with primitives, and avoids the destructuring gotcha. Use reactive() only when you explicitly want to group related state into a single reactive object.

Vue Component Anatomy: template, script setup, style

Every Vue Single-File Component (SFC) contains up to three blocks in one .vue file: <template> for declarative HTML markup with Vue directives, <script setup> for Composition API logic with TypeScript, and <style scoped> for CSS that is automatically scoped to prevent leaking into child components — this file format is what makes Vue uniquely readable and beginner-friendly compared to React's separation of concerns model.

Every Vue Single-File Component (SFC) has three optional blocks. Here is a complete, real-world component:

<template>
  <li :class="{ completed: task.done }">
    <input
      type="checkbox"
      :checked="task.done"
      @change="$emit('toggle', task.id)"
    />
    <span>{{ task.title }}</span>
    <button @click="$emit('remove', task.id)">Delete</button>
  </li>
</template>

<script setup>
// defineProps replaces the props option
const props = defineProps({
  task: {
    type: Object,
    required: true
  }
})

// defineEmits declares events this component can emit
const emit = defineEmits(['toggle', 'remove'])
</script>

<style scoped>
/* scoped = styles only apply to this component */
li { display: flex; align-items: center; gap: 12px; padding: 12px 0 }
li.completed span { text-decoration: line-through; opacity: .5 }
button { margin-left: auto; background: none; border: none; cursor: pointer }
</style>

Three things to notice: scoped styles mean your CSS never leaks to other components; defineProps and defineEmits are compiler macros — you do not import them; and the template supports full JavaScript expressions, directives like v-if, v-for, and event listeners with @click.

Vue Router: Building a Multi-Page App

Vue Router 4 is the official routing library for Vue 3 — configure routes as an array mapping path strings to component imports, wrap your app in RouterView, use RouterLink for navigation instead of anchor tags, and access current route params and query strings via the useRoute() composable inside any component using the Composition API.

Vue Router 4 is the official routing library. If you scaffolded with create vue and selected Vue Router, it is already configured. Here is the basic structure:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import TasksView from '../views/TasksView.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: HomeView },
    { path: '/tasks', component: TasksView },
    // Dynamic route — /tasks/42
    { path: '/tasks/:id', component: TaskDetail }
  ]
})

export default router

In your templates, use <RouterLink to="/tasks"> instead of <a href> for navigation, and <RouterView /> where you want the matched component to render. To access the current route in a component, use useRoute(). To navigate programmatically, use useRouter().

Pinia: Modern State Management (Replaces Vuex)

Pinia is the official state management library for Vue 3, replacing Vuex in 2022 with a dramatically simpler API — no mutations, no verbose action/mutation separation, just a defineStore() function that returns a reactive store with state, computed getters, and methods, with full TypeScript inference and Vue DevTools integration out of the box.

Pinia is the officially recommended state management library for Vue 3. It replaced Vuex in 2022. The API is dramatically simpler — no more mutations, no more verbose action/mutation separation. Pinia stores are just reactive objects with computed properties and methods:

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useTaskStore = defineStore('tasks', () => {
  // State
  const tasks = ref([])

  // Getters (computed)
  const completedCount = computed(
    () => tasks.value.filter(t => t.done).length
  )
  const pendingTasks = computed(
    () => tasks.value.filter(t => !t.done)
  )

  // Actions
  function addTask(title) {
    tasks.value.push({ id: Date.now(), title, done: false })
  }
  function toggleTask(id) {
    const task = tasks.value.find(t => t.id === id)
    if (task) task.done = !task.done
  }
  function removeTask(id) {
    tasks.value = tasks.value.filter(t => t.id !== id)
  }

  return { tasks, completedCount, pendingTasks, addTask, toggleTask, removeTask }
})

Using this store in any component is one line: const taskStore = useTaskStore(). Then access taskStore.tasks, call taskStore.addTask('Write unit tests'), and the template updates automatically. Pinia also has first-class Vue DevTools integration and full TypeScript inference.

Fetching Data with Axios and the Composition API

The Composition API pattern for data fetching is to extract the async logic into a composable — a function prefixed with "use" that returns reactive refs for data, loading state, and error — which can then be imported and reused across multiple components, eliminating the repetitive loading/error boilerplate that appears in every fetch-heavy component.

The Composition API makes data fetching clean and reusable. Here is a composable — a reusable piece of reactive logic — that handles async data fetching with loading and error states:

import { ref } from 'vue'
import axios from 'axios'

export function useFetch<T>(url: string) {
  const data = ref<T | null>(null)
  const loading = ref(true)
  const error = ref<string | null>(null)

  axios.get<T>(url)
    .then(res => { data.value = res.data })
    .catch(err => { error.value = err.message })
    .finally(() => { loading.value = false })

  return { data, loading, error }
}

// Using it in a component:
// const { data: posts, loading, error } = useFetch('/api/posts')

Build It: Task Manager App Walkthrough

Building a complete task manager app is the fastest way to solidify Vue 3 fundamentals — it requires reactive state with ref() and computed(), component decomposition, Pinia store for cross-component state, Vue Router for multi-page navigation, and form handling with v-model, covering the full Composition API workflow in a project with real utility that belongs in a portfolio.

Let's build a complete task manager app that demonstrates everything we have covered: reactive state, components, Vue Router, and Pinia. Here is the main TasksView.vue:

<template>
  <div class="tasks-view">
    <h1>My Tasks
      <span class="badge">{{ store.completedCount }}/{{ store.tasks.length }}</span>
    </h1>

    <!-- Add task form -->
    <form @submit.prevent="handleAdd">
      <input
        v-model="newTitle"
        placeholder="Add a new task..."
        :disabled="!newTitle.trim()"
      />
      <button type="submit" :disabled="!newTitle.trim()">Add</button>
    </form>

    <!-- Filter tabs -->
    <div class="filters">
      <button
        v-for="f in filters"
        :key="f"
        :class="{ active: activeFilter === f }"
        @click="activeFilter = f"
      >{{ f }}</button>
    </div>

    <!-- Task list -->
    <TransitionGroup name="list" tag="ul">
      <TaskItem
        v-for="task in filteredTasks"
        :key="task.id"
        :task="task"
        @toggle="store.toggleTask"
        @remove="store.removeTask"
      />
    </TransitionGroup>

    <p v-if="filteredTasks.length === 0" class="empty">
      No tasks here. Add one above.
    </p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useTaskStore } from '@/stores/tasks'
import TaskItem from '@/components/TaskItem.vue'

const store = useTaskStore()
const newTitle = ref('')
const filters = ['All', 'Pending', 'Completed']
const activeFilter = ref('All')

const filteredTasks = computed(() => {
  if (activeFilter.value === 'Pending') return store.pendingTasks
  if (activeFilter.value === 'Completed') return store.tasks.filter(t => t.done)
  return store.tasks
})

function handleAdd() {
  if (!newTitle.value.trim()) return
  store.addTask(newTitle.value.trim())
  newTitle.value = ''
}
</script>

This single view demonstrates: v-model for two-way binding, v-for for list rendering, v-if for conditional rendering, computed for filtered lists, Pinia for centralized state, TransitionGroup for animated list changes, and component communication via props and emits. That is the majority of Vue in one real component.

Vue Ecosystem: Nuxt, VueUse, Vuetify, PrimeVue

Nuxt.js — Full-Stack Vue

Nuxt 3 is the production framework built on top of Vue 3. It adds server-side rendering (SSR), file-based routing (your file structure becomes your routes), server API routes, and optimized static site generation. If you are building a content-heavy site, a marketing page, or any application that needs SEO, Nuxt is the answer. It is the Vue equivalent of Next.js in the React world — and many developers argue it is more ergonomic.

VueUse — 200+ Composable Utilities

VueUse is a collection of over 200 ready-made composables covering everything from local storage (useLocalStorage), to mouse tracking (useMouse), to intersection observers (useIntersectionObserver), to clipboard access (useClipboard). Before writing any custom composable, check if VueUse already has it. It almost certainly does.

Vuetify — Material Design Components

Vuetify is a complete Vue UI library built on Material Design 3. It includes over 80 production-ready components — data tables, dialogs, date pickers, navigation drawers, autocomplete — with a consistent design system. It is the right choice when you need to move fast without designing from scratch.

PrimeVue — Enterprise Components

PrimeVue is an alternative component library focused on data-heavy enterprise applications. Its data grid, tree table, and form components are particularly powerful. Unlike Vuetify's Material design system, PrimeVue is unstyled by default in its Unstyled mode, which means you can apply your own design system while getting the complex behavior for free.

Job Market: Vue.js vs React for Hiring in 2026

React leads Vue in U.S. job listings by approximately 3-to-1, with React appearing in roughly 60% of frontend listings versus Vue's 15-20%; however, Vue developers face a smaller candidate pool per opening, and outside the U.S. — particularly in China, Japan, France, Germany, and the global Laravel ecosystem — Vue's market share is substantially higher, making geographic targeting a key variable in the Vue-vs-React career decision.

Let's be honest about the numbers. In raw US job listings, React leads by a significant margin — approximately 3-to-1 over Vue. If getting a job at a large US tech company is your only goal, React is the safer investment of learning time.

But the picture is more nuanced:

• Vue dominates in Asia and Europe. China, Japan, South Korea, Germany, and the Netherlands all have strong Vue communities. Many global companies with Asian or European headquarters standardize on Vue.
• Vue is the default for smaller companies and agencies. Boutique development shops, digital agencies, and SaaS startups frequently choose Vue for its speed and developer experience. If you are freelancing or working at a 5-50 person company, Vue is highly viable.
• Vue developers earn comparable salaries. Stack Overflow's Developer Survey consistently shows Vue developers earning within 5-10% of React developers. The skills overlap significantly — a senior Vue developer can learn React in weeks.
• AI-assisted development levels the playing field. In 2026, with tools like Claude and GitHub Copilot, the syntax differences between Vue and React are less important than understanding the underlying concepts. AI can translate between the two instantly.

Next Steps: AI-Assisted Vue Development

The developers who will dominate frontend work in 2026 are not the ones who memorized the Vue API — they are the ones who understand how to pair Vue's reactivity model with AI tools to build faster than anyone thought possible.

At Precision AI Academy, we teach this exact combination. You will learn Vue's fundamentals the right way — building real applications with the Composition API, Vue Router, and Pinia — and then you will learn how to use Claude, GitHub Copilot, and other AI tools to 10x your output. AI cannot replace a developer who does not understand what reactive state is. But it absolutely supercharges the developer who does.

Our 3-day in-person bootcamp is structured so that by the end of day one, you have a working app. By day three, you are deploying AI-integrated products you can show at your next job interview.

The bottom line: Vue 3 is a production-ready, developer-friendly framework with the tools you need to build anything — Vite for fast builds, Pinia for state, Vue Router for navigation, Nuxt 3 for full-stack SSR. The learning curve is gentler than React or Angular, and once you know the Composition API, building real applications moves quickly. The U.S. job market is smaller than React's, but Vue developers who go deep on TypeScript and Nuxt face less competition per opening and comparable salaries.

Frequently Asked Questions

Is Vue.js good for beginners in 2026?

Yes. Vue.js is widely considered the most beginner-friendly of the three major frontend frameworks. Its single-file component structure is intuitive, the documentation is the best in class, and you can start with simple Options API syntax before moving to the more powerful Composition API. Most developers report being productive with Vue within a week of starting — often faster than that if they already know HTML and JavaScript basics.

Should I learn Vue 2 or Vue 3 in 2026?

Vue 3 is the only version worth learning in 2026. Vue 2 reached end-of-life in December 2023 and no longer receives security patches or updates. Every modern learning resource, library, and job posting references Vue 3. If you encounter Vue 2 code in an existing codebase, the Composition API and script setup syntax you learned for Vue 3 will still transfer — the mental model is the same, the ergonomics are just better in Vue 3.

Vue.js vs React in 2026: which should I learn?

Both are excellent choices, but for different contexts. React dominates large enterprise teams, has the biggest US job market, and has a massive third-party ecosystem. Vue is faster to learn, often better for smaller teams, and produces cleaner, more readable templates. If you are a beginner or building a product solo, Vue's gentle learning curve is a major advantage. If maximum US job market optionality is the priority, React edges it. Practically speaking, the underlying concepts — components, props, state, reactivity — are identical. Learn one well and the other takes weeks, not months.

How long does it take to learn Vue.js?

With focused effort, you can build a functional Vue 3 app within one to two days. Mastering the full ecosystem — Vue Router, Pinia, Nuxt.js, testing with Vitest and Vue Test Utils — takes two to four weeks of daily practice. If you already know HTML, CSS, and basic JavaScript, Vue's core concepts are learnable in an afternoon. The Composition API takes a bit longer to fully internalize, but most developers find it natural within their first real project.

Note: Code examples in this article use Vue 3 with the Composition API and script setup syntax. TypeScript type annotations are shown where relevant but all examples are valid JavaScript if you prefer to omit them. Versions current as of April 2026: Vue 3.4+, Vue Router 4.3+, Pinia 2.1+, Vite 5+.

Sources: Stack Overflow Developer Survey 2025, GitHub Octoverse, TIOBE Programming Index