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.
- β What's Included?
- ποΈ Core Dependencies
- ποΈ Project Structure
- π Getting Started
- π‘ Scripts
- π License
- 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.