[![MIT License][license-shield]][license-url] [![LinkedIn][linkedin-shield]][linkedin-url]
Logo

Vue Based Monorepo Template

Monorepo template for Vue.js applications and libraries
Explore the docs »

Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. License
  4. Contact
  5. Acknowledgments
## About The Project ![Vue Based Monorepo Template - Cover][product-cover] I've built this monorepo template for frontend libraries and applications based on pnpm workspaces and Nx. The ease of code reusability as well as good starting point for optimized builds will provide you a solid foundation for projects that are expected to grow. Although this template is focused on the Vue.js framework, it can be easily adapted to other ones.

(back to top)

### Features The template contains a few example libraries and applications with some basic functionality. It also demonstrates the connections between them such as usage of outsourced components and composables. - `@monorepo/app_1` - example application using shared libraries. - `@monorepo/commons` - shared library with some useful helpers and Vue composables. - `@monorepo/ui` - shared library with basic styling, starter components and Storybook.

(back to top)

### Built With - [![Nx][Nx]][Nx-url] - [![pnpm][pnpm]][pnpm-url] - [![Husky][Husky]][Husky-url] - [![Vite][Vite]][Vite-url] - [![TypeScript][TypeScript]][TypeScript-url] - [![ESLint][ESLint]][ESLint-url] - [![Vue][Vue]][Vue-url] - [![Tailwind CSS][Tailwind CSS]][Tailwind CSS-url]

(back to top)

## Getting Started ### Prerequisites - [Node.js](https://nodejs.org/en/) - pnpm: ```bash npm install -g pnpm #or npm install --global corepack@latest corepack enable pnpm corepack use pnpm@latest-10 ``` or you can follow the other options from the [pnpm installation guide](https://pnpm.io/installation).
Why pnpm? Because we are using a monorepo structure, we have to use so called `workspaces` as well. pnpm's `workspaces` implementation is fast, efficient, and disk-space friendly due to its unique symlinked node_modules structure. For example, package hoisting and dependency management are handled efficiently by pnpm. You can read more about pnpm's advantages in the [official documentation](https://pnpm.io/motivation).
### Installation 1. Clone the repository ```bash git clone https://github.com/Nagell/monorepo_template.git ``` 2. Install dependencies ```bash pnpm run init ``` 3. Start the development server ```bash # Start the app_1 cd apps/app_1 pnpm run dev # Start the Storybook cd libs/ui pnpm run storybook:dev ``` 4. Change git remote url to avoid accidental pushes to base project ```bash git remote set-url origin github_username/repo_name git remote -v # confirm the changes ``` All commands, tips and documentation for used tools and libraries can be found in the [DEVELOPMENT.md](./docs/DEVELOPMENT.md) file.

(back to top)

## License Distributed under the MIT License. See [Licence.md][license-url] for details.

(back to top)

## Contact Dawid Nitka - [LinkedIn][linkedin-url] Project Link: [https://github.com/Nagell/monorepo_template](https://github.com/Nagell/monorepo_template)

(back to top)

## Acknowledgments - [Best-README-Template](https://github.com/othneildrew/Best-README-Template) - [@stylistic/eslint-plugin](https://eslint.style/packages/default)

(back to top)

## Changes - **2025-05-29**: Updated to use pnpm v10 instead of yarn classic. If you still want to use the old version, you can switch to the [yarn](https://github.com/Nagell/monorepo_template/tree/yarn) branch of this repository. [license-shield]: https://img.shields.io/badge/License-MIT-lightgrey.svg?style=for-the-badge [license-url]: ./LICENSE.md [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555 [linkedin-url]: https://www.linkedin.com/in/dawidnitka [product-cover]: /docs/assets/cover.png [Nx]: https://img.shields.io/badge/Nx-143055?style=for-the-badge&logo=nx&logoColor=white [Nx-url]: https://nx.dev/ [pnpm]: https://img.shields.io/badge/pnpm-F69220?style=for-the-badge&logo=pnpm&logoColor=white [pnpm-url]: https://pnpm.io/ [Husky]: https://img.shields.io/badge/Husky-000000?style=for-the-badge&logo=husky&logoColor=white [Husky-url]: https://typicode.github.io/husky/ [Vite]: https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white [Vite-url]: https://vitejs.dev/ [TypeScript]: https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white [TypeScript-url]: https://www.typescriptlang.org/ [ESLint]: https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white [ESLint-url]: https://eslint.org/ [Vue]: https://img.shields.io/badge/Vue-4FC08D?style=for-the-badge&logo=vue.js&logoColor=white [Vue-url]: https://vuejs.org/ [Tailwind CSS]: https://img.shields.io/badge/Tailwind-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white [Tailwind CSS-url]: https://tailwindcss.com/