Giới thiệu

Tasco Framework là nền tảng frontend dùng chung cho các sản phẩm nội bộ của tập đoàn: một team core duy trì, nhiều team sản phẩm dùng lại. Nền tảng đóng gói thành một Nuxt layer — dự án chỉ khai báo extends là có sẵn giao diện, đăng nhập, phân quyền và lớp gọi backend.

// nuxt.config.ts của dự án sản phẩm
export default defineNuxtConfig({
  extends: ['@tasco/nuxt-layer-base'],
  compatibilityDate: '2025-01-01',
})

Dành cho ai

Trang này và toàn bộ khu Bắt đầu, Hướng dẫn, Component viết cho dev team sản phẩm — người dựng màn hình nghiệp vụ trên nền framework. Người phát triển chính framework đọc khu Phát triển core.

Framework hợp với ứng dụng quản trị nội bộ sau đăng nhập: danh sách, biểu mẫu, chi tiết, báo cáo. Trang công khai cần SEO hay first-paint nhanh không phải mục tiêu chính — vẫn làm được nhưng phải tự bật SSR cho route đó, xem Chế độ render.

Framework lo gì, team lo gì

Việc	Ai làm
Theme, màu, font, mật độ component	Framework — dự án chỉ dùng token `--tasco-*`
Bộ component `C*` (bảng, form, nhãn, layout…)	Framework
Đăng nhập IAM, cookie phiên, làm mới thông tin người dùng	Framework
Cơ chế phân quyền (chặn route, menu, nút)	Framework — dự án khai báo URI quyền
Proxy `/api/**` sang backend, gắn token	Framework (Nitro BFF)
Chuẩn hoá lỗi, hiển thị toast/notification	Framework
Màn hình nghiệp vụ, điều hướng, DTO của sản phẩm	Team sản phẩm
Nội dung `.env` (IAM, gateway, secret)	Team sản phẩm
Hạ tầng CI/CD, registry image, máy chạy	Team sản phẩm (có sẵn mẫu)

Một trang trông như thế nào

Không import, không đăng ký component: layer đã auto-import composable và đăng ký C* toàn cục.

vue

<script setup lang="ts">
definePageMeta({ permissions: ['/orders/search'] })

interface Order { id: number, code: string, customer: string }

const api = useApi()
const { dataSource, loading, pagination, onChange } = useTable<Order>(
  (query) => api('/orders', { query }),
)

const columns = [
  { title: 'Mã đơn', dataIndex: 'code', key: 'code' },
  { title: 'Khách hàng', dataIndex: 'customer', key: 'customer' },
]
</script>

<template>
  <CPageHeader title="Đơn hàng" />
  <CTable
    row-key="id"
    :columns="columns"
    :data-source="dataSource"
    :loading="loading"
    :pagination="pagination"
    @change="onChange"
  />
</template>

Các package

Dự án sản phẩm chỉ cài @tasco/nuxt-layer-base (và @tasco/ui cho type); phần còn lại là phụ thuộc của nó. Tên package chỉ cần nhớ khi tra cứu API.

Package	Vai trò
`@tasco/nuxt-layer-base`	Điểm vào duy nhất: plugin, middleware, layout, Nitro BFF, trang đăng nhập
`@tasco/ui`	Bộ component `C*` bọc Ant Design Vue
`@tasco/composables`	`useApi`, `useAuth`, `usePermission`, `useTable`, `useThemeMode`
`@tasco/theme`	Design token → theme antdv + biến CSS `--tasco-*`
`@tasco/utils`	`AppError`, phân loại lỗi, kiểu `Paginated`
`@tasco/cli`	`create-tasco-app` — tạo dự án mới
`@tasco/ai`	Chat streaming qua BFF, thư viện prompt (tuỳ chọn)
`@tasco/mcp`	Máy chủ MCP tri thức framework cho AI tooling

Toàn bộ @tasco/* đi cùng một số phiên bản (lockstep) và phát hành trên GitLab Package Registry ở cấp group tasco.

Ba quy tắc cần nhớ ngay

Không import ant-design-vue trực tiếp trong dự án — dùng C* từ @tasco/ui, kể cả không viết thẻ <a-*> trong template. Đổi phiên bản antdv là việc của core, dự án không chịu ảnh hưởng.
Màu và khoảng cách chỉ dùng var(--tasco-*) — không hardcode mã màu. Xem Viết CSS trong dự án.
Chặn quyền phía client chỉ để làm đẹp trải nghiệm. Backend vẫn phải tự kiểm tra quyền trên mọi request. Xem Mô hình phân quyền.

Đọc tiếp

Chuẩn bị môi trường — Node, pnpm, token registry. Làm một lần cho mỗi máy.
Tạo app mới — chạy CLI và hiểu thư mục sinh ra.
Hướng dẫn từng bước — dựng màn hình quản lý đơn hàng hoàn chỉnh trong ~45 phút.
Thêm vào dự án có sẵn — nếu dự án đã tồn tại.

Giới thiệu ​

Dành cho ai ​

Framework lo gì, team lo gì ​

Một trang trông như thế nào ​

Các package ​

Ba quy tắc cần nhớ ngay ​

Đọc tiếp ​