The boilerplate of Vue v3, Typescript, Vite, Vue Router, Pinia, Axios, Tailwind CSS, and Vue i18n for buildings efficient, faster, maintainable, and scalable for enterprise applications.
- Authentication: Provides a secure login system for users.
- Authorization: Implements role-based access control to manage user permissions.
- Multiple Language: Supports localization and enables users to switch between different languages.
- Theme (Light/Dark/System): Offers a choice of light, dark, or system-based theme for a personalized user experience.
- Form Validation: Includes form validation functionality to ensure data integrity and improve user experience.
- Error Handling: Handles and displays error messages in a user-friendly manner.
- API Integration: Integrates with external APIs to fetch data and provide dynamic content.
- Responsive Design: Ensures the application is optimized for various screen sizes and devices.
- Testing: Includes a test suite with unit tests and integration tests for reliable code quality.
- Documentation: Provides comprehensive documentation to guide developers and users.
| 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. |
| Pinia |  |
An intuitive store for Vue.js applications, providing centralized state management. |
| Axios |  |
Promise-based HTTP client for making API requests. |
| Tailwind CSS |  |
A utility-first CSS framework for rapid UI development. |
| Vite-Plugin-Vue-Devtools | |
The next iteration of Vue DevTools. |
├── public/
│ ├── assets
│ │ ├── fonts
| | └── images
│ └── favicon.ico
├── src
│ ├── assets
│ │ ├── images
│ │ └── styles
│ ├── components
│ │ ├── ui
│ │ └── ...
│ ├── constants
│ ├── http
│ │ ├── axios
│ │ └── index.ts
│ ├── layouts
│ │ ├── MainLayout.ts
│ │ └── ...
│ ├── locales
│ │ ├── en
│ │ ├── ru
│ │ └── uz
│ ├── router
│ │ ├── index.ts
│ │ ├── routes.ts
│ │ └── ...
│ ├── services
│ ├── types
│ ├── utils
│ ├── App.vue
│ └── main.ts
├── package.json
└── ...
.
-
Node Js version
^v20. -
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/Erkinov97/vue3-boilerplate.git cd vue3-boilerplate code .
-
From the project's root directory, install the required packages (dependencies):
pnpm install
or
pnpm i
-
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
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.