What is Vue Tutorial?” — I think you’re asking for a detailed beginner-friendly tutorial on Vue.js (the popular JavaScript framework), explained step by step with lots of examples, the way a real human teacher would do it in 2026.
Vue.js (usually just called Vue) is currently at version 3 (Vue 3), and that’s what almost everyone should learn in 2025–2026. Vue 3 is modern, fast, smaller, and has two main styles:
- Options API → classic, very beginner-friendly
- Composition API → modern, more flexible (recommended for new projects)
Today I’ll teach you using the Composition API (the future-proof way), but I’ll also show the Options version so you understand both.
Step 0 – Quick “Why Vue?” (30-second motivation)
- Super easy syntax (feels like enhanced HTML + JS)
- You can start with one <script> tag — no build tools needed at first
- Excellent for building interactive UIs (forms, dashboards, SPAs)
- Great performance + small bundle size
- Huge community + excellent docs → https://vuejs.org
Ready? Let’s start from zero-setup playground → then move to real project.
Step 1: Hello World – No build tools (CDN way – perfect for learning)
Create a file called index.html and paste this:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Vue Hello</title> <!-- Latest Vue 3 from CDN --> <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> </head> <body> <div id="app"> <h1>Hello {{ message }}</h1> <button @click="changeMessage">Change Message</button> </div> <script> const { createApp, ref } = Vue; createApp({ setup() { // This is Composition API const message = ref("Vue Beginner! 🎉"); function changeMessage() { message.value = "You just clicked me! 🚀"; } // Everything you return here is available in template return { message, changeMessage }; } }).mount('#app'); </script> </body> </html> |
Open this file in browser → you should see:
Hello Vue Beginner! 🎉 [Change Message] button
Key things we learned here already:
- {{ message }} → interpolation (like mustache syntax)
- @click → shorthand for v-on:click (event listener)
- ref() → makes a reactive variable
- .value → you must use .value when changing/reading ref in JS (but not in template!)
- setup() → heart of Composition API
- createApp({…}).mount(‘#app’) → creates & mounts Vue app
Step 2: Let’s compare → Options API version (still very common)
Same example, but old-school style:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> createApp({ data() { return { message: "Vue Beginner! 🎉" }; }, methods: { changeMessage() { this.message = "You just clicked me! 🚀"; } } }).mount('#app'); </script> |
Template stays exactly the same.
Many old tutorials & jobs still use Options API → good to recognize both.
Step 3: Reactive counter – most important mini example
Update the <div id=”app”> part:
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<div id="app"> <h2>Counter: {{ count }}</h2> <button @click="count++">+1</button> <button @click="count--"> -1 </button> <p>Double is {{ double }}</p> </div> |
And script:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
createApp({ setup() { const count = ref(0); // Computed property (auto updates) const double = computed(() => count.value * 2); return { count, double }; } }).mount('#app'); |
You need to add:
|
0 1 2 3 4 5 6 7 8 |
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <!-- Also add this line for computed --> <script src="https://unpkg.com/@vue/reactivity@3"></script> <!-- or just use full build --> |
Better: use full build (already included in first example).
Important rule (2025–2026):
- ref() → for primitives (number, string, boolean)
- reactive() → for objects/arrays
|
0 1 2 3 4 5 6 7 8 9 10 11 |
const person = reactive({ name: "Rahul", age: 24 }); person.age++; // No .value needed! |
Step 4: v-bind, v-if, v-for – the core directives
Let’s make a small todo list (classic example)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="app"> <h1>My Todos</h1> <input v-model="newTodo" placeholder="Add new task..." @keyup.enter="addTodo" /> <button @click="addTodo">Add</button> <ul> <li v-for="todo in todos" :key="todo.id"> <input type="checkbox" v-model="todo.done" /> <span :class="{ done: todo.done }">{{ todo.text }}</span> <button @click="removeTodo(todo)">×</button> </li> </ul> <p v-if="todos.length === 0">No tasks yet 😊</p> <p v-else>You have {{ remaining }} tasks left</p> </div> |
Style (add in <head>):
|
0 1 2 3 4 5 6 |
.done { text-decoration: line-through; color: #888; } |
Script:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
const { ref, computed } = Vue; createApp({ setup() { const newTodo = ref(''); const todos = ref([ { id: 1, text: 'Learn Vue 3', done: true }, { id: 2, text: 'Build something cool', done: false } ]); let nextId = 3; function addTodo() { if (!newTodo.value.trim()) return; todos.value.push({ id: nextId++, text: newTodo.value, done: false }); newTodo.value = ''; } function removeTodo(todo) { todos.value = todos.value.filter(t => t !== todo); } const remaining = computed(() => { return todos.value.filter(t => !t.done).length; }); return { newTodo, todos, addTodo, removeTodo, remaining }; } }).mount('#app'); |
Directives we used:
- v-model → two-way binding (input ↔ data)
- v-for=”(item, index) in items” + :key → loop (always use :key!)
- :class=”{ done: todo.done }” → class binding
- v-if / v-else → conditional rendering
Step 5: What to do next (realistic 2026 learning path)
- Finish the official interactive tutorial → https://vuejs.org/tutorial (do all 15 steps)
- Build 3–5 small projects using CDN or Vite:
- Weather card
- Shopping cart
- Markdown previewer
- Movie search app (fetch API)
- Learn Components (very important!)
- How to create <TodoItem />, props, emits
- Setup real project → Vite is king in 2026
|
0 1 2 3 4 5 6 7 8 9 |
npm create vite@latest my-vue-app -- --template vue cd my-vue-app npm install npm run dev |
- Then learn (in this order):
- Props + emits
- <script setup> (huge time-saver)
- Pinia (modern store instead of Vuex)
- Vue Router
- Teleport, Suspense, <Transition>
Take it slow — do one concept → build mini demo → repeat.
Any part you want me to explain more deeply (components, props, Pinia, forms, routing…)? Just tell me — I’ll go as detailed as you want.
Happy coding! 🚀 You’ve got this 💙
