avary / vuetail-dashboard

This project is a dashboard for multipurpose usage I developed using vue3, vite, typescript, tailwindcss and more.

Multipurpose dashboard

Table of contents

• General info
• Technologies
• Features
• Plugins
• Project Structure
• Setup

General info

This project is a dashboard for multipurpose usage I developed using vue3, vite, typescript, tailwindcss and more.

Demo

Technologies

This Project was created by using:

• Vue3
• Vite
• TypeScript
• Pinia
• Tailwindcss

Features

• Vuejs v3 with typescript support.
• Vue3 Composition API.
• Dependency Injection design pattern for API backend services endpoints.
• Pinia for state management.
• Multi language support using I18n plugin.
• Lots of common UI components using tailwindcss.

Plugins

• Vee Validate v4
• Yup as a schema builder for validation with vee-validate
• I18n
• Vue3 perfect scrollbar
• Vueuse

Project Structure

├── public  
│    └── favicon.ico                               
├── src  
│    ├── assets
│    │    ├── css
│    │    ├── icons
│    │    ├── imgs
│    │    └── scss                  
│    ├── components
│    │    ├── buttons    
│    │    ├── form    
│    │    ├── helpers    
│    │    ├── icons    
│    │    ├── modal    
│    │    ├── table    
│    │    ├── ui    
│    │    └── widgets 
│    ├── composables   
│    ├── data   
│    ├── layouts
│    │    ├── auth    
│    │    └── dashboard                     
│    ├── plugins                     
│    ├── router                     
│    ├── stores                     
│    ├── types                     
│    ├── validations                     
│    ├── views                     
│    ├── App.vue                     
│    └── main.ts                     
├── .eslintrc.cjs                    
├── .gitignore                   
├── .prettierrc.json
├── env.d.ts
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.ts
├── README.md
├── tailwind.config.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Setup

To run this project, install it locally using npm:

$ cd vuetail-dashboard
$ npm install
$ npm run dev

Building for Production

$ npm run build

Lint with ESLint

$ npm run lint