✨ Vue Boilerplate ✨

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.

📚 Table of Contents

• ❓ What's Included?
• 🖇️ Core Dependencies
• 🗂️ Project Structure
• 🚀 Getting Started
  • Prerequisites
  • Installation
  • Run with Docker manually
    • Explanation of the Run Command:
  • Run with Docker compose
• 💡 Scripts
• 📝 License

❓ What's Included?

• [x] Authentication: Provides a secure login system for users.
• [x] Authorization: Implements role-based access control to manage user permissions.
• [x] Multiple Language: Supports localization and enables users to switch between different languages.
• [x] Theme (Light/Dark/System): Offers a choice of light, dark, or system-based theme for a personalized user experience.
• [x] Form Validation: Includes form validation functionality to ensure data integrity and improve user experience.
• [x] Error Handling: Handles and displays error messages in a user-friendly manner.
• [x] 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.

🖇️ Core Dependencies

↑ Back to top

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.

🗂️ Project Structure

.
├── 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
└── ...

🚀 Getting Started

Prerequisites

↑ Back to top

1. Node Js version v20.10.0. The current Long Term Support (LTS) release is an ideal starting point.

2. 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

   • Vue - Official
   • Tailwind CSS IntelliSense
   • Prettier - Code formatter
   • Prettier ESLint
   • Auto Rename Tag
   • Code Spell Checker
   • ESLint
   • Git Graph
   • GitLens — Git supercharged

Installation

↑ Back to top

1. Clone this repository to your computer:

   https://github.com/saymenghour/vue3-enterprise-boilerplate.git
   cd vue3-enterprise-boilerplate
   code .
   

2. Run command below to ignore git case-sensitive filename

   git config --global core.ignorecase false
   

3. From the project's root directory, install the required packages (dependencies):

   pnpm install
   

4. Create environment files:

   cp .env.example .env
   

5. Set up the environment variables.

6. To run the app on your local machine:

   pnpm dev
   

7. Build for production

   pnpm build
   

Run with Docker manually

• 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
  

  Explanation of the Run Command:

  -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.

Run with Docker compose

• 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 :)

💡 Scripts

↑ Back to top

The following scripts are available:

📝 License

This project is licensed under the MIT License.