Vue Boilerplate with Vite, Tailwind CSS, Pinia, and Axios
Tags: vue, pinia, vite, javascript
Published: 2024-02-10 08:47:19

I’d like to share the most recent Vuejs boilerplate with you here. When you clone this repository, 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/398uilzm1vwfthfo323f.png)

[Github - Vue Boilerplate](https://github.com/saymenghour/vue3-enterprise-boilerplate)

### 📚 Table of Contents

- [❓ What's Included?](#-whats-included)
- [🖇️ Core Dependencies](#️-core-dependencies)
- [🗂️ Project Structure](#️-project-structure)
- [🚀 Getting Started](#-getting-started)
  - [Prerequisites](#prerequisites)
  - [Installation](#installation)
- [💡 Scripts](#-scripts)
- [📝 License](#-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

[&#8593; Back to top](#-table-of-contents)

| Library      | Version                                                         | Description                                                                                        |
| ------------ | --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| Vue          | ![Vue](https://img.shields.io/badge/%5E3.4.5-blue.svg)          | A progressive JavaScript framework for building user interfaces.                                   |
| Vite         | ![Vite](https://img.shields.io/badge/%5E5.0.11-blue.svg)        | Next-generation frontend build tooling for fast and efficient development.                         |
| Typescript   | ![Typescript](https://img.shields.io/badge/%5E5.3.3-blue.svg)   | A superset of JavaScript that enhances the development experience with static typing.              |
| Vue Router   | ![Vue Router](https://img.shields.io/badge/%5E4.2.5-blue.svg)   | Official router for Vue.js, used for managing application routes.                                  |
| Vue i18n     | ![Vue i19n](https://img.shields.io/badge/%5E9.7.0-blue.svg)     | Internationalization plugin for Vue.js applications, enabling multi-language support.              |
| Vue Query    | ![Vue i19n](https://img.shields.io/badge/%5E1.26.0-blue.svg)    | A data-fetching and state management library for Vue.js, with powerful data-fetching capabilities. |
| Pinia        | ![Pinia](https://img.shields.io/badge/%5E2.1.7-blue.svg)        | An intuitive store for Vue.js applications, providing centralized state management.                |
| Axios        | ![Axios](https://img.shields.io/badge/%5E1.6.5-blue.svg)        | Promise-based HTTP client for making API requests.                                                 |
| Tailwind CSS | ![Tailwind CSS](https://img.shields.io/badge/%5E3.4.1-blue.svg) | A highly customizable CSS framework for rapid web development.                                     |

## 🗂️ Project Structure

```
├── public/
│   ├── assets
│   │   ├── fonts
|   |   └── images
│   └── favicon.ico
├── src
│   ├── assets
│   │   ├── images
│   │   └── styles
│   ├── components
│   │   ├── PrivateOutlet
│   │   ├── ui
│   │   └── ...
│   ├── constants
│   ├── hooks
│   ├── http
│   │   ├── axios
│   │   └── index.ts
│   ├── layouts
│   │   ├── MainLayout.ts
│   │   └── ...
│   ├── locales
│   │   ├── en
│   │   └── km
│   ├── modules
│   │   ├── authentication
│   │   ├── current-user
│   │   ├── dashboard
│   │   └── ...
│   ├── router
│   │   ├── privateRoutes.ts
│   │   ├── publicRoutes.ts
│   │   └── ...
│   ├── services
│   ├── types
│   ├── utils
│   │   ├── common
│   │   ├── crypto
│   │   └── ...
│   ├── App.ts
│   └── main.ts
├── types
├── package.json
└── ...
.
```

## 🚀 Getting Started

### Prerequisites

[&#8593; Back to top](#-table-of-contents)

1. [Node Js](https://nodejs.org/en/) version `v20.10.0`. The current Long Term Support (LTS) release is an ideal starting point.
2. [Visual Studio Code](https://code.visualstudio.com/download). 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**

   - [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)
   - [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
   - [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
   - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
   - [Prettier ESLint](https://marketplace.visualstudio.com/items?itemName=rvest.vs-code-prettier-eslint)
   - [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
   - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
   - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
   - [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
   - [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

### Installation

[&#8593; Back to top](#-table-of-contents)

1.  Clone this repository to your computer:

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

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

    ```sh
    git config --global core.ignorecase false
    ```

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

    ```sh
    pnpm install
    ```

4.  Create environment files:

    ```sh
    cp .env.example .env
    ```

5.  Set up the environment variables.

6.  To run the app on your local machine:

    ```sh
    pnpm dev
    ```

7.  Build for production

    ```sh
    pnpm build
    ```

    Happy Coding :)

## 💡 Scripts

[&#8593; Back to top](#-table-of-contents)

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

## 📝 License

This project is licensed under the [MIT](./LICENSE) License.