Tiếp tục series về Vue3.js. Trong bài viết này, chúng ta sẽ cùng đi qua quy trình xây dựng một ứng dụng cơ bản với Vue 3 – từ khởi tạo project đến tạo component, quản lý trạng thái và xử lý routing.

1. Chuẩn Bị Môi Trường

Yêu cầu:

• Node.js >= 16.x
• Trình quản lý gói: npm hoặc yarn

Cài đặt Vue CLI hoặc Vite (đề xuất dùng Vite):

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

2. Cấu Trúc Dự Án Cơ Bản

my-vue3-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   ├── main.js
└── index.html

• App.vue: Component gốc
• main.js: Điểm khởi đầu ứng dụng
• components: Các component tái sử dụng
• views: Các trang lớn (khi có routing)

3. Tạo Component Với Composition API

<!-- src/components/Counter.vue -->
<template>
  <div>
    <h2>Số lần: {{ count }}</h2>
    <button @click="increment">Tăng</button>
  </div>
</template>

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

const count = ref(0)
const increment = () => {
  count.value++
}
</script>

Sử dụngscript setup giúp viết component ngắn gọn và rõ ràng hơn rất nhiều.

4. Thêm Vue Router

Cài đặt:

npm install vue-router@4

Tạo file router:

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Khai báo router trong main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

5. Quản Lý Trạng Thái Với Pinia

Pinia là thư viện quản lý trạng thái hiện đại, thay thế Vuex trong Vue 3.

Cài đặt:

npm install pinia

Khởi tạo store:

// src/stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

Sử dụng trong component:

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <button @click="counter.increment">Count: {{ counter.count }}</button>
</template>

6. Styling và UI Framework

Vue 3 tương thích tốt với các UI framework như:

• Tailwind CSS (hiệu quả, tiện lợi)
• Element Plus
• Naive UI
• Vuetify 3

Ở đây, mình sẽ dùng Tailwind Css

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Thêm vào tailwind.config.js và main.css như hướng dẫn tại https://tailwindcss.com.

7. Build & Triển Khai

npm run build

Kết Luận

Vue 3 cùng với hệ sinh thái Vite, Pinia và Router tạo nên một môi trường phát triển frontend mạnh mẽ, hiện đại và dễ mở rộng. Bằng cách sử dụng Composition API, bạn có thể tổ chức logic một cách rõ ràng, dễ test và tái sử dụng.