Vue JS Step by Step Guide

Introduction

Vue JS is a progressive JavaScript framework for building interactive user interfaces. This tutorial covers Vue fundamentals, components, directives, and a small project example.

Step 1: Setting Up Vue

Create a new Vue project using Vite:

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

Step 2: Understanding Vue Components

Vue apps are built with components.

Example: Basic Component

<template>
  <h1>Hello, {{ name }}!</h1>
</template>

<script setup>
const name = "Vue Learner";
</script>

Step 3: Data Binding

Vue allows reactive data binding:

<template>
  <div>
    <input v-model="message" placeholder="Type something"/>
    <p>You typed: {{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
const message = ref("");
</script>

Step 4: Handling Events

Use Vue directives like v-on or shorthand @:

<template>
  <button @click="greet">Click Me</button>
</template>

<script setup>
const greet = () => alert("Hello Vue!");
</script>

Step 5: Conditional Rendering & Loops

Vue makes it easy to conditionally render elements or loop through data:

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
  <p v-if="items.length === 0">No items available.</p>
</template>

<script setup>
import { ref } from "vue";
const items = ref(["Apple", "Banana", "Cherry"]);
</script>

Step 6: Mini Project Example – Task List

Build a simple task list:

<template>
  <div>
    <input v-model="task" placeholder="Add a task" />
    <button @click="addTask">Add</button>
    <ul>
      <li v-for="(t, i) in tasks" :key="i">{{ t }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
const task = ref("");
const tasks = ref([]);

const addTask = () => {
  if(task.value) tasks.value.push(task.value);
  task.value = "";
};
</script>

Step 7: Next Steps

• Learn Vue Router for page navigation
• Learn Pinia or Vuex for state management
• Build more interactive components and reusable modules

Conclusion

By completing this guide, you’ll have a solid understanding of Vue JS fundamentals and can confidently build interactive web applications.

SEO Suggestions:

• Main keywords: Vue JS tutorial, Vue for beginners, learn Vue components, Vue directives, Vue mini project
• Meta description: Step-by-step Vue JS guide for beginners. Learn components, directives, event handling, and build a small interactive project.
• Catchy title suggestions: "Vue JS Step by Step Guide 2025", "Learn Vue JS: Beginner-Friendly Tutorial"