Vue Why, How and Setup
Getting started with Vue.js framework
🚀 What is Vue.js?
Vue.js is a progressive JavaScript framework for building user interfaces. It's easy to learn, flexible, and perfect for creating interactive web applications with reactive data binding.
<!-- Simple Vue Example -->
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return { message: 'Hello Vue!' }
}
}).mount('#app')
</script>
Why Use Vue.js?
Vue.js offers powerful features that make web development easier and more enjoyable. It combines simplicity with flexibility, making it ideal for both beginners and experienced developers.
Easy to Learn
Simple syntax and clear documentation make Vue beginner-friendly
Reactive
Automatic UI updates when data changes
Component-Based
Build reusable components for better code organization
Flexible
Use as much or as little as you need
🔹 Setup Method 1: CDN (Quickest)
The fastest way to start using Vue is by including it via CDN. Perfect for learning and small projects without build tools.
<!DOCTYPE html>
<html>
<head>
<title>My Vue App</title>
</head>
<body>
<div id="app">
<p>{{ greeting }}</p>
<button @click="count++">Count: {{ count }}</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
const { createApp } = Vue
createApp({
data() {
return {
greeting: 'Welcome to Vue!',
count: 0
}
}
}).mount('#app')
</script>
</body>
</html>Output:
Welcome to Vue!
🔹 Setup Method 2: Create Vue Project
For larger applications, use the official Vue CLI or Vite to create a full project with build tools and development server.
🔸 Using Vite (Recommended)
Steps to create a Vue project:
- Open your terminal
-
Run:
npm create vue@latest - Follow the prompts to configure your project
-
Navigate to project:
cd your-project-name -
Install dependencies:
npm install -
Start dev server:
npm run dev
# Create new Vue project
npm create vue@latest my-vue-app
# Navigate to project
cd my-vue-app
# Install dependencies
npm install
# Start development server
npm run dev🔹 Basic Vue App Structure
Understanding the basic structure helps you organize your Vue applications effectively:
// main.js - Entry point
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')<!-- App.vue - Root component -->
<template>
<div id="app">
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
</template>
<script>
export default {
data() {
return {
title: 'My Vue App',
description: 'Building with Vue is fun!'
}
}
}
</script>
<style>
#app {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
</style>🔹 Your First Vue Component
Components are reusable Vue instances with their own data and logic:
<div id="app">
<greeting-card name="Alice"></greeting-card>
<greeting-card name="Bob"></greeting-card>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
const app = Vue.createApp({})
app.component('greeting-card', {
props: ['name'],
template: `
<div style="border: 2px solid #42b883; padding: 15px; margin: 10px; border-radius: 8px;">
<h3>Hello, {{ name }}!</h3>
<p>Welcome to Vue.js</p>
</div>
`
})
app.mount('#app')
</script>Output:
Hello, Alice!
Welcome to Vue.js
Hello, Bob!
Welcome to Vue.js