vue-framework

Vue.js Framework

Getting Started

Vue.js is a progressive JavaScript framework for building user interfaces with reactive data binding.

Project Setup

Using Vite (recommended):

# Create new project
npm create vite@latest my-app -- --template vue

# Navigate and install
cd my-app
npm install

# Development server
npm run dev

# Build for production
npm run build

Vue Components

Components are reusable UI elements with template, script, and style.

Single File Components (.vue)

<template>
  <div class="counter">
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'Counter',
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return { count, increment };
  },
};
</script>

<style scoped>
.counter {
  padding: 20px;
  border: 1px solid #ccc;
}

button {
  margin-top: 10px;
}
</style>

Composition API

Modern approach using functions instead of objects:

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.email" type="email" placeholder="Email" required />
    <input v-model="form.password" type="password" placeholder="Password" required />
    <button type="submit" :disabled="loading">{{ loading ? 'Logging in...' : 'Login' }}</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  email: '',
  password: '',
});

const loading = ref(false);

const handleSubmit = async () => {
  loading.value = true;
  try {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(form.value),
    });
    if (response.ok) {
      console.log('Login successful');
    }
  } catch (error) {
    console.error('Login failed', error);
  } finally {
    loading.value = false;
  }
};
</script>

Reactive Data

Reactivity is the core feature of Vue: