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.