ninja-vue-template v0.0.0

vue-boilerplate

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

Component Structure

A typical Vue component contains the following sections:

1. IMPORTS
   1. LIBRARIES
   2. COMPONENTS
   3. SERVICES
   4. UTILS
   5. STORES
2. COMPOSABLES
3. SERVICE METHODS
4. STORE INSTANCE
5. PROPS
6. EMITS
7. PROVIDE/INJECT
8. DATA
9. SCHEMA
10. COMPUTED
11. WATCHERS
12. METHODS
13. HOOKS

Directory Structure

1. src/
   1. assets/: Static assets like CSS, images, etc.
   2. components/: Vue components.
      1. Base/: Base components like buttons, inputs, etc.
      2. Icons/: Icon components.
   3. constants/: Constant values used throughout the application.
   4. layouts/: Layout components.
   5. locales/: Localization files.
   6. middleware/: Middleware for API clients, etc.
   7. models/: TypeScript interfaces and types.
   8. plugins/: Vue plugins.
   9. router/: Vue Router configuration.
   10. services/: Service functions and classes.
   11. stores/: Pinia stores.
   12. utils/: Utility functions.
   13. views/: Vue views or pages.