The boilerplate of Vue v3, Typescript, Vite, Vue Router, Pinia, Axios, Tailwind CSS, Vue Query, 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.
.
├── public/
│ ├── assets
│ │ ├── fonts
| | └── images
│ └── favicon.ico
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── images
│ │ └── styles
│ ├── components
│ │ ├── ActionButton
│ │ ├── Avatar.vue
│ │ ├── Box.vue
│ │ ├── Breadcrumb.vue
│ │ ├── Button.vue
│ │ ├── Checkbox.vue
│ │ ├── Col.vue
│ │ ├── Content.vue
│ │ ├── DataTable.vue
│ │ ├── Descriptions.vue
│ │ ├── Form.vue
│ │ ├── Grid.vue
│ │ ├── Input.vue
│ │ ├── LocaleSwitcher.vue
│ │ ├── PrivateOutlet.vue
│ │ ├── Row.vue
│ │ ├── Section.vue
│ │ ├── Skeleton
│ │ ├── Tag.vue
│ │ ├── ThemeSwitcher
│ │ │ ├── ThemeSwitcher.vue
│ │ │ └── icons
│ │ │ ├── dark.svg
│ │ │ ├── light.svg
│ │ │ └── system.svg
│ │ ├── Title.vue
│ │ ├── index.ts
│ │ └── ...
│ ├── composables
│ │ ├── index.ts
│ │ ├── notification.ts
│ │ ├── useFormAsync.ts
│ │ └── useI18n.ts
│ ├── constants
│ ├── http
│ │ ├── axios
│ │ │ ├── index.ts
│ │ │ └── interceptor.ts
│ │ └── index.ts
│ ├── layouts
│ │ ├── MainLayout.vue
│ │ ├── ...
│ ├── lib
│ │ ├── shadcn
│ │ └── utils.ts
│ ├── locales
│ │ ├── en.ts
│ │ ├── index.ts
│ │ └── km.ts
│ ├── main.ts
│ ├── modules
│ │ ├── authentication
│ │ ├── dashboard
│ │ ├── exception
│ │ │ ├── NotFound.vue
│ │ │ └── ...
│ │ └── user-management
│ │ ├── router.ts
│ │ └── user
│ │ ├── components
│ │ │ ├── UserDetailsInfo.vue
│ │ │ ├── UserListingDropdownAction.vue
│ │ │ └── UserStatus.vue
│ │ ├── pages
│ │ │ ├── UserCreate.vue
│ │ │ ├── UserDetails.vue
│ │ │ ├── UserEdit.vue
│ │ │ └── UserListing.vue
│ │ ├── userApi.ts
│ │ ├── userSchema.ts
│ │ ├── userService.ts
│ │ ├── userStore.ts
│ │ └── userType.ts
│ ├── router
│ │ ├── guards.ts
│ │ ├── index.ts
│ │ ├── privateRoutes.ts
│ │ └── publicRoutes.ts
│ ├── services
│ ├── types
│ └── utils
│ ├── common
│ └── crypto
├── 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.10.0
. 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 false
-
From 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
-
In your terminal, navigate to the root directory of your React project and run:
docker build -t my-react-app .
-
Start the container using the following command, replacing my-react-app with your preferred name:
docker run -p 5173:5173 --name my-react-app my-react-app
-p 5173:5173
: Maps port 5173 inside the container to port 5173 on your Mac, allowing access from your browser.--name my-react-app
: Assigns a name (my-react-app) to the container for easier management.
-
Build and Run the Container
Execute the following command to build the Docker all images and start the container in detached mode (running in the background) for local development:
docker compose up -d
Build and start for production
docker compose -f compose.prod.yaml up -d
docker-compose up
: This instructs Docker Compose to build and bring up the services defined in your docker-compose.yml file.-d
: The -d flag specifies detached mode, allowing the container to run in the background without attaching to your terminal session. -
Stop the Container
When you're finished developing and want to stop the container, use this command:
docker compose stop
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.