Chapter 19: Vue Why, How and Setup

Why Vue? + How Vue Works? + How to Set It Up?” lesson, like the very first real class in a serious Vue 3 course in Hyderabad in 2026. No rushing, lots of real talk, analogies, examples, and the exact modern path most good developers follow right now.

Grab your notebook (or VS Code) — let’s go step by step.

1. Why Vue? (The Honest 2026 Answer)

Imagine you’re choosing a frontend framework in February 2026.

You basically have four serious contenders for new projects:

Why many teams (especially in India, startups, mid-size companies) choose Vue in 2026:

1. Extremely gentle learning curve → You write mostly normal HTML + CSS + JavaScript → No huge mental model shift like React hooks rules or Angular’s DI/decorators
2. Fantastic developer experience right away → <script setup> = minimal boilerplate → Directives feel like super-powered HTML (v-if, v-for, v-model) → Reactivity just works (no useState + useEffect dance everywhere)
3. Smaller & faster out of the box → Vue 3 core runtime ≈ 20 KB gzipped → Vite builds are tiny & lightning-fast HMR
4. Progressive adoption → You can start with one <script> tag on an old PHP/WordPress page → Later go full SPA → later add SSR with Nuxt → later go islands / partial hydration
5. Beautiful balance between structure & freedom → Enough structure (SFCs, router, Pinia) to keep large teams sane → Enough freedom so you don’t feel handcuffed
6. Huge real-world usage in India & Asia Alibaba, Xiaomi, JD.com, Meituan, Bilibili, Tencent, Didi… all massive Vue shops → Lots of Indian startups & product companies choose it (cheaper to hire, faster delivery)

Short honest answer in 2026:

If you want to ship beautiful, fast, maintainable UIs quickly — and don’t want to fight the framework every day — Vue 3 is still one of the sweetest spots in frontend right now.

2. How Vue Works? (Core Mental Model – 5-Minute Explanation)

Vue is a declarative, reactivity-driven UI library.

You describe what the UI should look like based on state — Vue handles when & how to update the real DOM.

Five big ideas:

1. Reactivity When you change a ref or reactive object → Vue knows exactly which parts of the UI depend on it → only those parts re-render.

2. Single-File Components (.vue) One file = HTML-like template + JavaScript logic + scoped CSS

   vue

   PHP

   0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   <template>   <h1>Hello {{ name }}</h1>   <button @click="name = 'Vue Lover'">Change</button> </template>   <script setup> import { ref } from 'vue' const name = ref('World') </script>   <style scoped> h1 { color: navy; } </style>

3. Template Syntax (HTML + Superpowers)

   • {{ }} → text interpolation
   • :attr or v-bind:attr → dynamic attributes
   • @event or v-on:event → events
   • v-if / v-show / v-for / v-model → control flow & forms

4. Composition API (modern heart – <script setup>)

   JavaScript

   PHP

   0 1 2 3 4 5 6 7 8 9 10 11

   const count = ref(0) const double = computed(() => count.value * 2)   watch(count, (newV) => console.log('Count changed to', newV))   function increment() { count.value++ }

5. Virtual DOM + Compiler optimizations Vue compiles templates to highly efficient render functions → In 2026 Vue 3.6+ has Vapor Mode (optional no-virtual-DOM path → even faster)

Mental model summary:

You → write state + template that describes UI based on state Vue → watches state changes → surgically updates only necessary DOM parts

3. How to Set Up Vue in 2026 (Modern & Recommended Path)

There are still 3 main ways — but only one you should use for serious work.

Best Way (2026 Standard): Vite + Vue 3 + TypeScript

→ Opens http://localhost:5173 → Edit src/App.vue → changes appear instantly (Hot Module Replacement)

Folder structure you get (clean & modern):

Quick First File – Hello World with Counter

Replace src/App.vue:

→ Save → see it live

Next Steps After First Run (Scaling Path)

1. Add routing

   Bash

   PHP

   0 1 2 3 4 5 6

   npm install vue-router@4

2. Add state management

   Bash

   PHP

   0 1 2 3 4 5 6

   npm install pinia

3. Add TypeScript strictness (already there with vue-ts template)

4. (Optional but common) → switch to Nuxt 3 later if you need SSR/SEO/static generation

   Bash

   PHP

   0 1 2 3 4 5 6

   npx nuxi@latest init my-nuxt-app

Final 2026 Quick-Start Checklist

• Use Vite + Vue 3 + TypeScript (–template vue-ts)
• Always <script setup>
• Use ref / reactive / computed / watch
• Organize early: components/, views/, composables/
• Add vue-router & pinia when > 5–7 pages
• Use Tailwind or UnoCSS for styling (most popular in India right now)

Any part you want to go deeper right now?

• Why <script setup> is better than old export default?
• First project ideas after this hello-world?
• How to add router + pinia step-by-step?
• Vue vs React feeling in 2026 from Indian dev perspective?

Just tell me — we’ll keep building your Vue journey together 🚀

Happy learning from Hyderabad! 💙