gem-hunterThe boilerplate of Vue v3, Typescript, Vite, Vue Router, Pinia, Axios, Tailwind CSS, Vue Query, VeeValidate, Zod, and Vue i18n for buildings efficient, faster, maintainable, and scalable for enterprise applications.
The boilerplate of Vue v3, Typescript, Vite, Vue Router, Pinia, Axios, Tailwind CSS, Vue Query, VeeValidate, Zod, and Vue i18n for buildings efficient, faster, maintainable, and scalable for enterprise applications.
| Library | Version | Description |
|---|---|---|
| Vue | A progressive JavaScript framework for building user interfaces. | |
| Vite | Next-generation frontend build tooling for fast and efficient development. | |
| Typescript | A superset of JavaScript that enhances the development experience with static typing. | |
| Vue Router | Official router for Vue.js, used for managing application routes. | |
| Vue i18n | Internationalization plugin for Vue.js applications, enabling multi-language support. | |
| Vue Query | A data-fetching and state management library for Vue.js, with powerful data-fetching capabilities. | |
| Pinia | An intuitive store for Vue.js applications, providing centralized state management. | |
| Axios | Promise-based HTTP client for making API requests. | |
| Tailwind CSS | A highly customizable CSS framework for rapid web development. | |
| VeeValidate | Painless Vue form. | |
| Zod | TypeScript-first schema validation with static type inference. |
.
├── public/
│ ├── assets
│ │ ├── fonts
| | └── images
│ └── favicon.ico
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── images
│ │ │ └── logo.svg
│ │ └── styles
│ │ └── main.css
│ ├── components
│ │ ├── index.ts
│ │ ├── shared
│ │ ├── theme-switcher
│ │ ├── ui
│ │ │ ├── Avatar.vue
│ │ │ ├── Button.vue
│ │ │ ├── Card.vue
│ │ │ └── ...
│ │ └── vee-validate
│ │ ├── CheckboxField.vue
│ │ ├── CheckboxGroupField.vue
│ │ │ └── ...
│ ├── composables
│ ├── constants
│ ├── http
│ │ ├── axios
│ │ │ ├── index.ts
│ │ │ └── interceptor.ts
│ │ └── index.ts
│ ├── layouts
│ ├── locales
│ │ ├── en.ts
│ │ ├── index.ts
│ │ └── km.ts
│ ├── main.ts
│ ├── modules
│ │ ├── auth
│ │ │ ├── LoginView.vue
│ │ │ ├── authenticationService.ts
│ │ │ ├── authenticationType.ts
│ │ │ ├── loginSchema.ts
│ │ │ ├── routes.ts
│ │ │ └── useAuth.ts
│ │ ├── current-user
│ │ │ ├── currentUserApi.ts
│ │ │ ├── currentUserStore.ts
│ │ │ └── currentUserType.ts
│ │ ├── dashboard
│ │ │ ├── DashboardView.vue
│ │ │ ├── OverviewView.vue
│ │ │ └── RecentSales.vue
│ │ ├── exception
│ │ │ ├── NotFound.vue
│ │ │ └── UnauthorizeView.vue
│ ├── router
│ │ ├── guards.ts
│ │ ├── index.ts
│ │ ├── privateRoutes.ts
│ │ └── publicRoutes.ts
│ ├── services
│ │ └── localStorage.ts
│ ├── types
│ │ ├── index.ts
│ │ └── index.ts
│ └── utils
│ ├── common
│ ├── crypto
│ └── env.ts
├── types
│ ├── env.d.ts
│ ├── global.d.ts
│ └── router.d.ts
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── tailwind.config.js
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── ...
Node Js version v20+. The current Long Term Support (LTS) release is an ideal starting point.
Visual Studio Code. Visual Studio Code is the free and open-sourced code editor. It is one of the top most editor used especially for JavaScript application development.
Recommended Plugin for VSCode
Clone this repository to your computer:
https://github.com/saymenghour/vue3-enterprise-boilerplate.git cd vue3-enterprise-boilerplate code .
Run command below to ignore git case-sensitive filename
git config --global core.ignorecase falseFrom the project's root directory, install the required packages (dependencies):
pnpm install
Create environment files:
cp .env.example .env
Set up the environment variables.
To run the app on your local machine:
pnpm dev
Build for production
pnpm build
This will gracefully stop the container without affecting its data or configuration.
Happy Coding :)
The following scripts are available:
| Script | Action |
|---|---|
pnpm install |
Installs the project dependencies. |
pnpm dev |
Runs the application in development mode. |
pnpm build |
Builds the production-ready optimized bundle. |
pnpm preview |
Starts the preview server using Vite. |
pnpm lint |
Runs ESLint to lint the project files and fix any issues. |
pnpm format |
Formats the source code using Prettier. |
This project is licensed under the MIT License.