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
   • Features
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. License
4. Contact
5. Acknowledgments

About The Project

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

• 
• 
• 
• 
• 
• 
• 
• 

(back to top)

Getting Started

Prerequisites

• Node.js

• pnpm:

  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.

  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.

Installation

1. Clone the repository

   git clone https://github.com/Nagell/monorepo_template.git

2. Install dependencies

   pnpm run init

3. Start the development server

   # 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

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

(back to top)

License

Distributed under the MIT License. See Licence.md for details.

(back to top)

Contact

Dawid Nitka - LinkedIn

Project Link: https://github.com/Nagell/monorepo_template

(back to top)

Acknowledgments

• Best-README-Template
• @stylistic/eslint-plugin

(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 branch of this repository.