app.config › tasco

Các khoá dưới tasco trong app/app.config.ts mà layer đọc. Khác runtimeConfig, app.config.ts cố định lúc build và đi xuống trình duyệt — hợp với cấu hình giao diện, không dùng cho bí mật hay giá trị đổi theo môi trường.

// app/app.config.ts
import { h } from 'vue'
import { IconShoppingCart } from '@tabler/icons-vue'
import type { NavItem } from '@tasco/ui'

export default defineAppConfig({
  tasco: {
    appTitle: 'Quản lý đơn hàng',
    footerText: '© Tập đoàn Tasco',
    themeMode: 'light',
    topNav: [{ label: 'Điều hành', path: '/' }] satisfies NavItem[],
    nav: [
      {
        label: 'Đơn hàng',
        path: '/orders',
        icon: () => h(IconShoppingCart, { size: 18 }),
        permission: '/orders/search',
      },
    ] satisfies NavItem[],
  },
})

Khoá

Khoá	Kiểu	Mặc định	Đọc ở
tasco.appTitle	string	'Tasco'	Tiêu đề cạnh logo trong layout; tiêu đề TascoLoginForm ở trang /auth/login
tasco.footerText	string	'© Tập đoàn Tasco'	Chân trang layout; rỗng → không hiện
tasco.themeMode	'light' | 'dark'	'light'	Chế độ khởi tạo của useThemeMode khi người dùng chưa chọn (chưa có cookie tasco:theme)
tasco.topNav	NavItem[]	[]	Menu module ngang trên header (CTopNav); rỗng → ẩn
tasco.nav	NavItem[]	[]	Menu sidebar (CSideNav)

Cả topNav và nav được lọc qua usePermission().filterByPermission trước khi hiển thị. Layout tô sáng mục có path là tiền tố dài nhất của đường dẫn hiện tại.

NavItem

Kiểu export từ @tasco/ui.

Field	Kiểu	Bắt buộc	Ý nghĩa
label	string	Có	Nhãn hiển thị
path	string	Không	Đường dẫn điều hướng của mục lá; nhóm có children thì bỏ trống
icon	() => VNode	Không	Render function, vd () => h(IconHome, { size: 18 }) — không truyền thẳng component
permission	string	Không	URI quyền; người dùng không có quyền thì mục bị ẩn, nhóm bị ẩn thì cả nhánh ẩn
children	NavItem[]	Không	Menu con một cấp
key	string	Không	Khoá riêng; mặc định lấy path, không có path thì label kèm vị trí

Merge giữa layer và dự án

Nuxt merge app.config.ts bằng defu: object gộp sâu, dự án thắng khi trùng khoá; mảng được nối (phần tử của dự án đứng trước, của layer nối sau). Layer để nav và topNav rỗng nên menu hiện đúng những gì dự án khai.

Thêm khoá của dự án

Khoá riêng của dự án đặt ngoài tasco để không đụng khoá core có thể thêm sau này:

export default defineAppConfig({
  tasco: { appTitle: 'Quản lý đơn hàng' },
  orders: { defaultPageSize: 50 },
})

Liên quan

• Khung giao diện — menu, tiêu đề trang, thu gọn sidebar.
• Chặn theo quyền — permission trên mục menu.
• Biến môi trường & runtimeConfig — cấu hình đổi được lúc chạy.