Practical: Xây dựng Todo App với Nuxt 4

todo-app/
├── app.vue                    # Root layout
├── pages/
│   └── index.vue              # Main todo page
├── components/
│   ├── TodoForm.vue            # Add new todo
│   ├── TodoList.vue            # List all todos
│   ├── TodoItem.vue            # Single todo row
│   └── TodoFilter.vue          # Filter: all/active/completed
├── composables/
│   └── useTodos.ts             # Todo state management
├── types/
│   └── todo.ts                 # TypeScript types
├── assets/
│   └── css/
│       └── main.css            # Global styles + CSS custom properties
├── app.config.ts               # App configuration
└── nuxt.config.ts              # Nuxt configuration

npx nuxi init todo-app
cd todo-app
npm install
npm run dev

todo-app/
├── .nuxt/               # Thư mục build — Nuxt tự quản lý
├── app/                 # Code app của bạn
│   ├── app.vue          # Root component
│   └── assets/          # Static assets
├── node_modules/        # Dependencies
├── .gitignore           # Git ignore rules
├── nuxt.config.ts       # Cấu hình Nuxt
├── package.json         # Project metadata + scripts
├── tsconfig.json        # TypeScript config
└── README.md            # Project readme

{
  "name": "todo-app",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "dependencies": {
    "nuxt": "^4.0.0",
    "vue": "latest"
  }
}

// nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2025-07-01',
  devtools: { enabled: true },
  modules: [],
  css: ['~/assets/css/main.css'],
  app: {
    head: {
      title: 'Todo App',
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
      ]
    }
  }
})

// app/types/todo.ts

/**
 * Todo item — dữ liệu cốt lõi của app.
 * Dùng `interface` để mô tả hình dạng của object.
 */
export interface Todo {
  /** Unique identifier — dùng crypto.randomUUID() để generate */
  id: string

  /** Nội dung của todo */
  title: string

  /** Trạng thái hoàn thành */
  completed: boolean

  /** Thời gian tạo — dùng để sort hoặc hiển thị */
  createdAt: Date
}

/**
 * Filter type — literal union type.
 * Chỉ có thể là 1 trong 3 giá trị này.
 */
export type TodoFilter = 'all' | 'active' | 'completed'

// Tạo ID duy nhất — không trùng lặp, không cần thư viện ngoài
const id = crypto.randomUUID()
// Ví dụ: "a1b2c3d4-e5f6-7890-abcd-ef1234567890"

// app/composables/useTodos.ts

import type { Todo, TodoFilter } from '~/types/todo'

/**
 * useTodos — composable quản lý toàn bộ state và logic của Todo App.
 *
 * Shared state qua useState → mọi component gọi useTodos() đều
 * đọc/ghi cùng một state, không cần prop drilling hay emit lòng vòng.
 */
export const useTodos = () => {
  // ============================================================
  // STATE — dùng useState cho shared state SSR-safe
  // ============================================================

  /**
   * useState<Todo[]>('todos', () => [])
   *
   * - Key 'todos': unique identifier trong toàn app.
   *   Mọi component gọi useState('todos') đều lấy cùng 1 ref.
   * - Lazy init () => []: chỉ chạy 1 lần khi state chưa tồn tại.
   *   Dùng arrow function để tránh chạy không cần thiết ở SSR.
   */
  const todos = useState<Todo[]>('todos', () => [])

  /**
   * Filter state — cũng share qua useState để TodoList và TodoFilter
   * cùng đọc 1 nguồn filter mà không cần emit qua lại.
   */
  const filter = useState<TodoFilter>('todoFilter', () => 'all')

  // ============================================================
  // LOCALSTORAGE PERSISTENCE
  // ============================================================

  // Load dữ liệu từ localStorage khi app khởi tạo (chỉ ở client)
  if (import.meta.client) {
    try {
      const stored = localStorage.getItem('nuxt-todos')
      if (stored) {
        // Parse JSON và chuyển createdAt từ string thành Date
        const parsed: Todo[] = JSON.parse(stored)
        todos.value = parsed.map(todo => ({
          ...todo,
          createdAt: new Date(todo.createdAt)
        }))
      }
    } catch {
      // Nếu localStorage bị corrupt hoặc không có dữ liệu — bỏ qua
      console.warn('Failed to load todos from localStorage')
    }
  }

  /**
   * watch — theo dõi sự thay đổi của todos và tự động lưu vào localStorage.
   *
   * { deep: true }: theo dõi cả thay đổi bên trong array (add/remove item,
   * thay đổi completed, thay đổi title). Mặc định watch chỉ theo dõi
   * tham chiếu của ref — không phát hiện mutation bên trong.
   */
  if (import.meta.client) {
    watch(todos, (newTodos) => {
      localStorage.setItem('nuxt-todos', JSON.stringify(newTodos))
    }, { deep: true })
  }

  // ============================================================
  // COMPUTED — reactive derivation
  // ============================================================

  /**
   * computed — tự động tính toán lại khi dependency (todos) thay đổi.
   * Giống như Excel formula — thay đổi input, output tự update.
   */
  const activeTodos = computed(() => todos.value.filter(t => !t.completed))
  const completedTodos = computed(() => todos.value.filter(t => t.completed))

  const activeCount = computed(() => activeTodos.value.length)
  const completedCount = computed(() => completedTodos.value.length)

  /**
   * filteredTodos — dựa trên filter state hiện tại, lọc todos tương ứng.
   * Đây là computed được dùng trong TodoList để render đúng danh sách.
   */
  const filteredTodos = computed(() => {
    switch (filter.value) {
      case 'active':
        return activeTodos.value
      case 'completed':
        return completedTodos.value
      default:
        return todos.value
    }
  })

  // ============================================================
  // CRUD OPERATIONS
  // ============================================================

  /**
   * Thêm todo mới.
   * - Dùng crypto.randomUUID() cho id duy nhất.
   * - Đặt createdAt là thời điểm hiện tại.
   * - Tạo object Todo mới và push vào array.
   */
  const addTodo = (title: string) => {
    const trimmed = title.trim()
    if (!trimmed) return  // Không thêm todo rỗng

    const todo: Todo = {
      id: crypto.randomUUID(),
      title: trimmed,
      completed: false,
      createdAt: new Date()
    }
    todos.value.push(todo)
  }

  /**
   * Toggle trạng thái completed của todo.
   * Tìm todo theo id, nếu thấy thì đảo ngược completed.
   */
  const toggleTodo = (id: string) => {
    const todo = todos.value.find(t => t.id === id)
    if (todo) {
      todo.completed = !todo.completed
    }
  }

  /**
   * Xóa todo theo id.
   * Dùng filter để tạo array mới không chứa id đó.
   * Gán lại cho todos.value để trigger reactivity.
   */
  const removeTodo = (id: string) => {
    todos.value = todos.value.filter(t => t.id !== id)
  }

  /**
   * Chỉnh sửa title của todo.
   * Tìm todo theo id, cập nhật title mới.
   */
  const editTodo = (id: string, title: string) => {
    const trimmed = title.trim()
    if (!trimmed) {
      // Nếu title rỗng sau khi trim — xóa todo luôn
      removeTodo(id)
      return
    }

    const todo = todos.value.find(t => t.id === id)
    if (todo) {
      todo.title = trimmed
    }
  }

  /**
   * Xóa tất cả todo đã hoàn thành.
   * Dùng filter để giữ lại những todo chưa completed.
   */
  const clearCompleted = () => {
    todos.value = todos.value.filter(t => !t.completed)
  }

  // ============================================================
  // RETURN — chỉ expose những gì component cần
  // ============================================================

  return {
    // State
    todos,
    filter,

    // Computed
    activeTodos,
    completedTodos,
    activeCount,
    completedCount,
    filteredTodos,

    // Actions
    addTodo,
    toggleTodo,
    removeTodo,
    editTodo,
    clearCompleted
  }
}

<script setup lang="ts">
/**
 * TodoForm — component form để thêm todo mới.
 *
 * Sử dụng:
 * - ref: local state cho input text.
 * - useTodos: lấy addTodo từ composable.
 * - v-model: two-way binding giữa input và ref.
 * - @submit.prevent: ngăn form reload page.
 */

const newTodo = ref('')
const { addTodo } = useTodos()

/**
 * Xử lý khi form submit.
 * - Trim để loại bỏ khoảng trắng thừa ở đầu/cuối.
 * - Nếu rỗng sau trim — không làm gì (tránh thêm todo rỗng).
 * - Gọi addTodo, sau đó reset input.
 */
const handleSubmit = () => {
  const trimmed = newTodo.value.trim()
  if (!trimmed) return

  addTodo(trimmed)
  newTodo.value = ''
}
</script>

<template>
  <form
    class="todo-form"
    @submit.prevent="handleSubmit"
  >
    <input
      v-model="newTodo"
      type="text"
      class="todo-input"
      placeholder="What needs to be done?"
      autocomplete="off"
    />
    <button
      type="submit"
      class="btn-add"
      :disabled="!newTodo.trim()"
    >
      Add
    </button>
  </form>
</template>

<style scoped>
.todo-form {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.todo-input {
  flex: 1;
  padding: 12px 16px;
  font-size: 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s;
}

.todo-input:focus {
  border-color: var(--color-primary);
}

.todo-input::placeholder {
  color: var(--color-text-muted);
}

.btn-add {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: white;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}

.btn-add:hover:not(:disabled) {
  opacity: 0.9;
}

.btn-add:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
</style>

<script setup lang="ts">
import type { Todo } from '~/types/todo'

/**
 * TodoItem — component cho một dòng todo.
 *
 * Giao tiếp với parent qua:
 * - defineProps: nhận dữ liệu todo từ parent.
 * - defineEmits: emit event toggle, remove, edit lên parent.
 *
 * Có 2 chế độ:
 * - View mode: hiển thị title + checkbox + nút xóa.
 * - Edit mode: input text để chỉnh sửa title.
 */

/** Props — todo object từ parent (TodoList) */
const props = defineProps<{
  todo: Todo
}>()

/** Emits — typed event để parent lắng nghe */
const emit = defineEmits<{
  toggle: [id: string]
  remove: [id: string]
  edit: [id: string, title: string]
}>()

/** Local state cho edit mode */
const isEditing = ref(false)
const editText = ref('')

/**
 * Bắt đầu edit mode.
 * Lưu title hiện tại vào editText để user có thể chỉnh sửa.
 */
const startEdit = () => {
  isEditing.value = true
  editText.value = props.todo.title
}

/**
 * Lưu kết quả chỉnh sửa.
 * Nếu title rỗng sau trim → không làm gì.
 * Gọi emit edit để cập nhật ở composable.
 */
const saveEdit = () => {
  const trimmed = editText.value.trim()
  if (!trimmed) {
    // Nếu rỗng sau trim — xóa todo
    emit('remove', props.todo.id)
    isEditing.value = false
    return
  }

  // Chỉ emit nếu title thực sự thay đổi
  if (trimmed !== props.todo.title) {
    emit('edit', props.todo.id, trimmed)
  }
  isEditing.value = false
}

/** Hủy edit mode — quay lại view mode, không lưu thay đổi */
const cancelEdit = () => {
  isEditing.value = false
}
</script>

<template>
  <div
    class="todo-item"
    :class="{
      completed: todo.completed,
      editing: isEditing
    }"
  >
    <!-- Checkbox: toggle completed -->
    <input
      type="checkbox"
      class="todo-checkbox"
      :checked="todo.completed"
      @change="emit('toggle', todo.id)"
    />

    <!-- VIEW MODE: hiển thị title -->
    <label
      v-if="!isEditing"
      class="todo-title"
      @dblclick="startEdit"
    >
      {{ todo.title }}
    </label>

    <!-- EDIT MODE: input chỉnh sửa -->
    <input
      v-else
      ref="editInputRef"
      v-model="editText"
      type="text"
      class="edit-input"
      @keyup.enter="saveEdit"
      @keyup.escape="cancelEdit"
      @blur="saveEdit"
    />

    <!-- Nút xóa -->
    <button
      class="btn-delete"
      @click="emit('remove', todo.id)"
      aria-label="Delete todo"
    >
      ×
    </button>
  </div>
</template>

<style scoped>
.todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.2s;
}

.todo-item:hover {
  background: var(--color-bg-hover);
}

.todo-item.completed .todo-title {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.todo-item.editing {
  background: var(--color-bg-active);
}

.todo-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.todo-title {
  flex: 1;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  word-break: break-word;
}

.edit-input {
  flex: 1;
  padding: 8px 12px;
  font-size: 16px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  outline: none;
}

.btn-delete {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 300;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  opacity: 0;
}

.todo-item:hover .btn-delete {
  opacity: 1;
}

.btn-delete:hover {
  background: var(--color-danger);
  color: white;
}
</style>

<script setup lang="ts">
import type { TodoFilter } from '~/types/todo'

/**
 * TodoFilter — bộ lọc all / active / completed.
 *
 * Sử dụng defineModel — Vue 3.4+ syntactic sugar cho v-model trong component.
 * defineModel tạo một ref đồng bộ 2 chiều với parent qua v-model.
 */

/**
 * defineModel<TodoFilter>({ required: true })
 *
 * - Tạo ra một ref mà khi thay đổi sẽ tự động emit update:modelValue.
 * - Parent dùng: <TodoFilter v-model="filter" />
 * - Không cần defineProps + defineEmits thủ công nữa.
 * - required: true — bắt buộc parent phải truyền v-model.
 */
const filter = defineModel<TodoFilter>({ required: true })

/** Danh sách các filter option */
const filters: { label: string; value: TodoFilter }[] = [
  { label: 'All', value: 'all' },
  { label: 'Active', value: 'active' },
  { label: 'Completed', value: 'completed' }
]
</script>

<template>
  <div class="todo-filters">
    <button
      v-for="f in filters"
      :key="f.value"
      class="filter-btn"
      :class="{ active: filter === f.value }"
      @click="filter = f.value"
    >
      {{ f.label }}
    </button>
  </div>
</template>

<style scoped>
.todo-filters {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 16px;
}

.filter-btn {
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.filter-btn.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
</style>

<script setup lang="ts">
/**
 * TodoList — component danh sách todo.
 *
 * Chức năng:
 * - Lọc todo theo filter (all/active/completed).
 * - Render list qua TodoItem.
 * - Hiển thị empty state khi không có todo.
 * - Footer: item count + clear completed.
 * - TransitionGroup animation khi thêm/xóa item.
 */

const {
  todos,
  filteredTodos,
  activeCount,
  completedCount,
  toggleTodo,
  removeTodo,
  editTodo,
  clearCompleted
} = useTodos()
</script>

<template>
  <div class="todo-list-wrapper">
    <!-- Bộ lọc -->
    <TodoFilter v-model="filter" />

    <!-- Empty state -->
    <div
      v-if="filteredTodos.length === 0"
      class="empty-state"
    >
      <p v-if="todos.length === 0">
        No todos yet! Add one above.
      </p>
      <p v-else>
        No {{ filter === 'active' ? 'active' : 'completed' }} todos.
      </p>
    </div>

    <!-- Danh sách todo với animation -->
    <TransitionGroup
      v-else
      name="todo-list"
      tag="ul"
      class="todo-list"
    >
      <li
        v-for="todo in filteredTodos"
        :key="todo.id"
      >
        <TodoItem
          :todo="todo"
          @toggle="toggleTodo"
          @remove="removeTodo"
          @edit="editTodo"
        />
      </li>
    </TransitionGroup>

    <!-- Footer -->
    <footer
      v-if="todos.length > 0"
      class="todo-footer"
    >
      <span class="items-left">
        {{ activeCount }} {{ activeCount === 1 ? 'item' : 'items' }} left
      </span>

      <button
        v-if="completedCount > 0"
        class="btn-clear"
        @click="clearCompleted"
      >
        Clear completed ({{ completedCount }})
      </button>
    </footer>
  </div>
</template>

<style scoped>
.todo-list-wrapper {
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 16px;
}

.todo-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

.items-left {
  font-weight: 500;
}

.btn-clear {
  padding: 4px 12px;
  font-size: 14px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-clear:hover {
  background: var(--color-danger);
  color: white;
}

/* ============================================================
   TransitionGroup animations — thêm/xóa todo item
   ============================================================ */

/* Animation khi item enter (được thêm vào) */
.todo-list-enter-active {
  transition: all 0.4s ease;
}

/* Trạng thái bắt đầu khi enter */
.todo-list-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}

/* Animation khi item leave (bị xóa) */
.todo-list-leave-active {
  transition: all 0.3s ease;
  position: absolute; /* Tránh chiếm không gian khi đang leave */
}

/* Trạng thái kết thúc khi leave */
.todo-list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* Move transition — khi các item còn lại tự động di chuyển lên */
.todo-list-move {
  transition: transform 0.3s ease;
}
</style>

<script setup lang="ts">
/**
 * index.vue — trang chủ của Todo App.
 *
 * File-based routing: `app/pages/index.vue` → route `/`.
 * Không cần khai báo route — Nuxt tự detect.
 *
 * Sử dụng:
 * - useHead: set document head (title, meta).
 * - useSeoMeta: type-safe SEO meta tags.
 */

useHead({
  title: 'Todo App — Nuxt 4',
  htmlAttrs: { lang: 'en' },
  link: [
    { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }
  ]
})

useSeoMeta({
  title: 'Todo App — Built with Nuxt 4',
  description: 'A simple, beautiful todo app built with Nuxt 4. Features: add, edit, filter, localStorage persistence.',
  ogTitle: 'Todo App — Nuxt 4',
  ogDescription: 'A simple todo app built with Nuxt 4',
  ogType: 'website',
  twitterCard: 'summary'
})
</script>

<template>
  <div class="todo-app-container">
    <header class="app-header">
      <h1 class="app-title">Todo App</h1>
      <p class="app-subtitle">Built with Nuxt 4</p>
    </header>

    <main class="app-main">
      <TodoForm />
      <TodoList />
    </main>

    <footer class="app-footer">
      <p>
        Double-click to edit a todo &middot;
        Press Enter to save &middot;
        Press Escape to cancel
      </p>
    </footer>
  </div>
</template>

<style scoped>
.todo-app-container {
  max-width: 560px;
  margin: 60px auto;
  padding: 0 20px;
}

.app-header {
  text-align: center;
  margin-bottom: 32px;
}

.app-title {
  font-size: 48px;
  font-weight: 300;
  color: var(--color-primary);
  margin: 0 0 8px;
  letter-spacing: -1px;
}

.app-subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}

.app-main {
  margin-bottom: 24px;
}

.app-footer {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
</style>

<template>
  <div class="app-root">
    <NuxtPage />
  </div>
</template>

<style>
/* Global styles — KHÔNG scoped để apply toàn app */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  background: var(--color-bg-body);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

/* app/assets/css/main.css */

/* ============================================================
   CSS Custom Properties — Theme variables
   Thay đổi theme bằng cách override các biến này
   ============================================================ */

:root {
  /* Colors */
  --color-primary: #6c5ce7;
  --color-primary-hover: #5a4bd1;
  --color-danger: #e74c3c;
  --color-danger-hover: #c0392b;
  --color-success: #27ae60;

  /* Background */
  --color-bg-body: #f5f6fa;
  --color-bg: #ffffff;
  --color-bg-hover: #f8f9fa;
  --color-bg-active: #f0f0ff;

  /* Text */
  --color-text: #2d3436;
  --color-text-muted: #95a5a6;

  /* Border */
  --color-border: #e0e0e0;

  /* Radius */
  --radius: 8px;

  /* Shadow */
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* Dark mode — kích hoạt khi user chọn dark mode ở OS */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #a29bfe;
    --color-primary-hover: #8b83e6;
    --color-danger: #ff7675;
    --color-danger-hover: #d63031;
    --color-success: #55efc4;

    --color-bg-body: #1a1a2e;
    --color-bg: #16213e;
    --color-bg-hover: #1a2744;
    --color-bg-active: #1e2d50;

    --color-text: #e0e0e0;
    --color-text-muted: #7f8c8d;

    --color-border: #2d3436;

    --shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
  }
}

// app/app.config.ts

export default defineAppConfig({
  app: {
    name: 'Nuxt 4 Todo App',
    version: '1.0.0'
  },
  ui: {
    primary: 'purple',
    animations: true
  }
})

<script setup lang="ts">
// Sử dụng useEventListener từ VueUse (hoặc onMounted + addEventListener)
onMounted(() => {
  const handler = (e: KeyboardEvent) => {
    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
      handleSubmit()
    }
  }
  window.addEventListener('keydown', handler)
  onUnmounted(() => window.removeEventListener('keydown', handler))
})
</script>

npm install sortablejs
npm install @vueuse/integrations

<script setup lang="ts">
import { useSortable } from '@vueuse/integrations/useSortable'

const el = ref<HTMLElement>()
useSortable(el, todos, {
  animation: 150,
  onEnd: () => { /* save order */ }
})
</script>

<script setup lang="ts">
const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>
<template>
  <button @click="toggleDark()">
    {{ isDark ? '☀️' : '🌙' }}
  </button>
</template>

npm install @vueuse/nuxt
# Thêm vào nuxt.config.ts modules: ['@vueuse/nuxt']

export const useToast = () => {
  const toasts = useState<Array<{ id: string; message: string; type: 'success' | 'error' }>>('toasts', () => [])

  const addToast = (message: string, type: 'success' | 'error' = 'success') => {
    const id = crypto.randomUUID()
    toasts.value.push({ id, message, type })
    setTimeout(() => {
      toasts.value = toasts.value.filter(t => t.id !== id)
    }, 3000)
  }

  return { toasts, addToast }
}

export type Priority = 'low' | 'medium' | 'high'

export interface Todo {
  id: string
  title: string
  completed: boolean
  createdAt: Date
  dueDate?: Date        // Optional — ngày hết hạn
  priority: Priority     // Độ ưu tiên
}