Vue.js Lesson 2: Setup with Vite
💚 Vue.js CourseLesson 2 of 10 · 20% complete
Let’s create a Vue app. Modern Vue uses Vite for development and the Composition API (Vue 3 style).
npm create vue@latest my-vue-app
# Select: TypeScript? No (for now)
# Select: Vue Router? Yes
# Select: Pinia? Yes
# Select: ESLint? Yes
cd my-vue-app
npm install
npm run dev # http://localhost:5173Single File Component (SFC)
<!-- src/App.vue -->
<template>
<!-- HTML template -->
<div class="app">
<h1>{{ message }}</h1>
<button @click="changeMessage">Click me</button>
</div>
</template>
<script setup>
// JavaScript / Composition API
import { ref } from "vue";
const message = ref("Hello, Vue!");
function changeMessage() {
message.value = "You clicked the button!";
}
</script>
<style scoped>
/* Scoped CSS — only applies to THIS component */
.app { text-align: center; padding: 40px; }
h1 { color: #42b883; }
</style>🏋️ Practice Task
Create your Vue app. Edit App.vue to show a greeting with your name. Add a button that counts how many times you clicked it. Use ref() for the count. Display “Clicked 0 times” and update on click.
💡 Hint: const count = ref(0). In template: {{ count }} times. Button: @click=”count++”
