DNA ATD Frontend

Vue 3 library with feature-based architecture and host-app integration helpers.

---

Quick Start

``bash
npm ci
npm run dev
npm run build
`

---

Project Structure

`
src/
├── components/common/ # Shared components
├── composables/ # Reusable functions
├── features/admin/ # Feature modules
│ ├── validation/
│ └── customization/
├── layouts/ # Layout components
├── router/ # Routes
├── services/ # API & Integration
├── utils/ # Helpers
└── views/ # Main views
`

---

Backend Integration

This library reads backend bootstrap data from a host-provided global object (default: window.APP_DATA) and exposes it via Vue Provide/Inject.

Provide bootstrap data from PHP:

`html




`

Consume in Vue (Composition API):

`javascript
import { useBackendContext } from '@illuminateeducation/dna-atd-frontend'

const { config, user } = useBackendContext()
`

---

Build Configuration

This package is published as an ESM-only npm library.

- Build output: dist/index.es.js + dist/index.d.ts
- Library build: npm run build

---

Features

- Validation Module - /admin/validation
- Customization Module - /admin/customization`

---

Built with Vue 3 + Vite + Pinia + Vuetify