xDev Asia

What is Vue.js, the "progressive framework" philosophy. Compare Vue vs React vs Angular vs Svelte. Vue DevTools, Vite setup. Single File Components, template syntax.

Vue.js & Nuxt: From Basics to Advanced

Part 1: Vue.js Fundamentals

xdev.asia

1. What is Vue.js?

Vue.js is one progressive framework for building user interfaces. "Progressive" means you can start simple and then expand gradually — from a small library to a full-stack framework with Nuxt.

Features	Vue	React	Angular	Svelte
Type	Progressive	Library	Full Framework	Compiler
Reactivity	Proxy-based	Virtual DOM	Zone.js	Compile-time
Template	HTML-based	JSX	HTML + directives	HTML-like
State	Pinia	Redux/Zustand	RxJS/NgRx	Stores
SSR	Nuxt	Next.js	Angular Universal	SvelteKit
Learning curve	Easy	Average	Difficult	Easy

2. Setup with Vite

# Tạo project Vue + TypeScript
npm create vue@latest my-app

# Options:
# ✔ TypeScript? Yes
# ✔ JSX Support? No
# ✔ Vue Router? Yes
# ✔ Pinia? Yes
# ✔ Vitest? Yes
# ✔ ESLint? Yes
# ✔ Prettier? Yes

cd my-app
npm install
npm run dev

3. Single File Component (SFC)

<!-- HelloWorld.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const message = ref('Xin chào Vue.js!')
const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <div class="container">
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<style scoped>
.container {
  padding: 1rem;
}
button {
  padding: 0.5rem 1rem;
  cursor: pointer;
}
</style>

4. Template Syntax

<template>
  <!-- Text interpolation -->
  <p>{{ message }}</p>
  <p>{{ count * 2 }}</p>

  <!-- Attribute binding -->
  <a :href="url">Link</a>
  <img :src="imageUrl" :alt="title" />

  <!-- Event handling -->
  <button @click="handleClick">Click</button>
  <button @click="count++">+1</button>
  <input @keydown.enter="submit" />

  <!-- Two-way binding -->
  <input v-model="name" />
  <p>Xin chào, {{ name }}!</p>

  <!-- Conditional rendering -->
  <p v-if="count > 10">Lớn hơn 10</p>
  <p v-else-if="count > 5">Lớn hơn 5</p>
  <p v-else>Nhỏ hơn hoặc bằng 5</p>

  <!-- List rendering -->
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

5. Vue DevTools

Install Vue DevTools extension on Chrome/Firefox for debugging:

See component tree and state
Track Pinia stores
Inspect Vue Router
Timeline events
Performance profiling

6. Project structure

my-app/
├── src/
│   ├── assets/         # Static assets
│   ├── components/     # Reusable components
│   ├── composables/    # Custom composables
│   ├── layouts/        # Layout components
│   ├── pages/          # Page components (if using vue-router)
│   ├── router/         # Vue Router config
│   ├── stores/         # Pinia stores
│   ├── types/          # TypeScript types
│   ├── App.vue         # Root component
│   └── main.ts         # Entry point
├── public/             # Static files
├── index.html
├── vite.config.ts
└── tsconfig.json