Chapter 1: Vue Home
What exactly is “Vue Home”?
In 99% of real Vue.js (Vue 3) projects created in 2025–2026, especially when you use Vite (the recommended tool):
Bash
|
0 1 2 3 4 5 6 7 8 |
npm create vite@latest my-app -- --template vue # or with TypeScript npm create vite@latest my-app -- --template vue-ts |
…Vite automatically generates this folder structure:
text
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
src/ ├── assets/ ← images, css, etc. ├── components/ ← reusable pieces (Header.vue, Button.vue, Card.vue…) ├── views/ ← page-level components ←←← this is important │ ├── HomeView.vue ← usually called "Home" or "HomeView" │ └── AboutView.vue ├── App.vue ← root component ├── main.js / main.ts ← entry point └── router/ └── index.js ← where routes are defined |
So “Vue Home” = HomeView.vue (or sometimes just Home.vue)
This file represents your website’s home page (the page people see when they go to yourdomain.com/ or localhost:5173/).
Why is it called Home / HomeView?
- In Vue Router (the official routing library), we define routes like this:
JavaScript
|
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 |
// src/router/index.js import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' // ← here import AboutView from '../views/AboutView.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', // ← root URL name: 'home', // named route (useful for <RouterLink>) component: HomeView // ← this component shows when URL = / }, { path: '/about', name: 'about', component: AboutView // or lazy: () => import('../views/AboutView.vue') } ] }) export default router |
- The path: ‘/’ → home page
- So naturally developers name that component Home or HomeView
Many people (including official Vite template) use HomeView to clearly signal: “This is a full page/view, not a small reusable component like Button or Card.”
Real example — what does a typical HomeView.vue look like?
Here’s a clean, modern 2026-style example using <script setup> (the preferred syntax today):
vue
|
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
<!-- src/views/HomeView.vue --> <template> <div class="home-page"> <header class="hero"> <h1>Welcome to My Awesome App</h1> <p class="subtitle">Built with Vue 3 + Vite + Composition API</p> <div class="cta-buttons"> <button class="primary" @click="startJourney"> Get Started </button> <RouterLink to="/about" class="secondary"> Learn More </RouterLink> </div> </header> <section class="features"> <h2>Why Choose Us?</h2> <div class="grid"> <FeatureCard title="Fast" description="Lightning quick thanks to Vue's reactivity" /> <FeatureCard title="Beautiful" description="Tailwind or your favorite CSS solution" /> <FeatureCard title="Scalable" description="From small widget to full SPA" /> </div> </section> <footer> <p>© {{ currentYear }} Webliance — Hyderabad 🚀</p> </footer> </div> </template> <script setup> import { ref, computed } from 'vue' import FeatureCard from '@/components/FeatureCard.vue' // @ = src alias import { useRouter } from 'vue-router' const router = useRouter() const currentYear = computed(() => new Date().getFullYear()) const count = ref(0) function startJourney() { count.value++ if (count.value >= 3) { alert('You really want to start! 🔥') router.push('/dashboard') // example navigation } } </script> <style scoped> .hero { text-align: center; padding: 6rem 2rem; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border-radius: 0 0 2rem 2rem; } h1 { font-size: 3.5rem; margin-bottom: 1rem; } .subtitle { font-size: 1.4rem; opacity: 0.9; } .cta-buttons { margin-top: 2rem; display: flex; gap: 1.5rem; justify-content: center; } .primary { background: white; color: #4f46e5; padding: 1rem 2.5rem; border-radius: 9999px; font-weight: bold; } .secondary { background: transparent; border: 2px solid white; color: white; padding: 1rem 2.5rem; border-radius: 9999px; text-decoration: none; font-weight: bold; } .features { padding: 4rem 2rem; text-align: center; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1200px; margin: 3rem auto 0; } </style> |
Quick breakdown (teacher mode on)
- <RouterLink to=”/about”> — this is how you create navigation links (much better than <a href> in SPA)
- <script setup> — modern & clean (no export default { } boilerplate)
- scoped styles — only apply to this component (no global pollution)
- We import small components like FeatureCard.vue → composition & reusability
- useRouter() → programmatic navigation (e.g. after button click)
How to see it live?
- Create fresh project:
Bash0123456789npm create vite@latest vue-home-demo -- --template vuecd vue-home-demonpm installnpm run dev
- Open http://localhost:5173 → that’s your Home page!
- Edit src/views/HomeView.vue (or sometimes it’s src/views/Home.vue) — changes appear instantly.
Summary Table: Home vs other things
| Term | Meaning | File usually | Typical path |
|---|---|---|---|
| Home / HomeView | Main landing page component | src/views/HomeView.vue | / |
| App.vue | Root wrapper (contains <router-view>) | src/App.vue | — |
| AboutView | Example second page | src/views/AboutView.vue | /about |
| FeatureCard | Reusable small component | src/components/FeatureCard.vue | — |
So when someone says “edit the home page in Vue”, they almost always mean HomeView.vue (or whatever component is mapped to path /).
Got questions?
- Want me to explain router setup more?
- How to make Home fetch data from API?
- Difference between views/ and components/?
- Add dark mode toggle on home?
Just say — we’ll go as deep as you want 🚀
Happy Vue-ing from Hyderabad! 🇮🇳
