{"id":16298957,"url":"https://github.com/ghiscoding/vue3-pnpm-workspace","last_synced_at":"2025-03-20T05:30:44.260Z","repository":{"id":38019262,"uuid":"498065603","full_name":"ghiscoding/vue3-pnpm-workspace","owner":"ghiscoding","description":"Vue 3 pnpm workspace boilerplate for reusable Components \u0026 Composables across a multi-applications setup","archived":false,"fork":false,"pushed_at":"2022-07-11T18:02:47.000Z","size":62,"stargazers_count":25,"open_issues_count":0,"forks_count":6,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-02-28T23:15:59.634Z","etag":null,"topics":["pnpm-workspace","typescript","vue","vue-composition-api","vue3"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ghiscoding.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-30T19:02:37.000Z","updated_at":"2025-01-30T12:20:21.000Z","dependencies_parsed_at":"2022-07-12T17:04:46.724Z","dependency_job_id":null,"html_url":"https://github.com/ghiscoding/vue3-pnpm-workspace","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2Fvue3-pnpm-workspace","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2Fvue3-pnpm-workspace/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2Fvue3-pnpm-workspace/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2Fvue3-pnpm-workspace/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ghiscoding","download_url":"https://codeload.github.com/ghiscoding/vue3-pnpm-workspace/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244056345,"owners_count":20390719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pnpm-workspace","typescript","vue","vue-composition-api","vue3"],"created_at":"2024-10-10T20:46:06.603Z","updated_at":"2025-03-20T05:30:43.950Z","avatar_url":"https://github.com/ghiscoding.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# Vue 3 and pnpm workspace boilerplate\n\n### Reuse Components \u0026 Composables across multiple Applications\n\n## Description\n\nThis boilerplate is to demo a setup where we can take advantage of [pnpm workspaces](https://pnpm.io/workspaces) where multiple Vue 3 applications can share Components and Composables. This setup will provide the ability for different teams to work on different applications while being able to share reusable Components \u0026 Composables to follow a DRY (Don't Repeat Yourself) setup.\n\nThe other ability that pnpm workspace is providing us is the ability to have our workspace running with and even without publishing the Component, Composable packages on NPM (under an [npm organization](https://docs.npmjs.com/organizations) to take advantage or workspace) or locally with [Verdaccio](https://verdaccio.org/)... in other words you could publish each packages of the workspace (in this demo that would be 4 of them: [application1](/apps/application1), [application2](/apps/application2), [components](/components) and [composables](/composables)) or simply skip all of that and simply build \u0026 run them locally without ever publishing them anywhere.\n\nFor a great versioning/publishing tool in a workspace environment, take a look at [Lerna-Lite](https://github.com/ghiscoding/lerna-lite) which is what I use in a workspace monorepo structure.\n\n## What is included/configured\n\n- [Vite](https://vitejs.dev/)\n- [Vue 3 - Composition API](https://vuejs.org/api/composition-api-setup.html#composition-api-setup)\n  - we use the `script setup` syntax in a TypeScript environment, more info in this Medium [article](https://medium.com/@AzilenTech/using-script-setup-for-vue-3-ec4b6173b7f4)\n- [pnpm workspaces](https://pnpm.io/workspaces)\n- [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) using [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)\n- [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) to auto-import Vue Components (to avoid adding `.use()` on each)\n- [TypeScript](https://www.typescriptlang.org/)\n\n## How does it work?\n\nSince we are using pnpm workspace and Vite, we can take advantage of Vite's [library mode](https://vitejs.dev/guide/build.html#library-mode) and build the `Components` and `Composables` packages in that mode and make them available as distributed libraries/packages (via their `dist` folder), then we can use them in `application1` and/or `application2` separately. What if you need develop a Component or Composables, do we need to rebuild every single time? Yes we do, but for that we can take advantage of Vite's [build.watch](https://vitejs.dev/config/#build-watch), which will rebuild for us and allow us to develop faster.\n\nFor more info about Vite library mode, this [article](https://dev.to/josip2312/build-a-typescript-component-library-with-vite-58dh) explains it well.\n\n## Project structure\n\n#### Components ([/components](/components))\n\nA very simple `MyButton` Component is provided as an example of a reusable component\n\n#### Composables ([/composables](/composables))\n\nA very simple `useMouse` Composable, which is a mouse position tracker, is provided as an example of a reusable composable.\n\n#### Apps ([/apps](/apps))\n\nThe `Apps` folder is where you will want to include all your applications.\n\n### Can we expand on this?\n\nSure, you could maybe add Directives and/or anything else that you deemed reusable. The steps are simple, just add a folder (probably easier to copy `Component` and rename/remove what is different) and then add it to the pnpm workspace via the [pnpm-workspace.yaml](/ghiscoding/vue3-pnpm-workspace/blob/main/pnpm-workspace.yaml) file and add proper build scripts in the [package.json](/ghiscoding/vue3-pnpm-workspace/blob/main/package.json) file in the project root.\n\n## Inspiration\n\nAll credit goes to the [Gun-Vue](https://github.com/DeFUCC/gun-vue) project when I was researching on how to do a Vue 3 pnpm workspace structure for reusability. I did not know how to build the Components/Composables as libraries and that project got me started. Thanks to them.\n\n## Contributions\n\nFeel free to contribution to the project if you think that you can improve it.\n\n## Installation\n\nThe steps should be straightforward, simply run pnpm install, execute a build of all packages and then run application1 or application2. The steps assume that you already have installed pnpm, if not then follow the [pnpm installation](https://pnpm.io/installation)\n\n1. run pnpm install\n\n```sh\npnpm install  # or pnpm i\n```\n\n2. run a build\n\n```sh\n# run a full build of everything\npnpm build\n\n# or run Components build separately\npnpm build:components\n\n# or run Composables build separately\npnpm build:composables\n\n# or run a build watch, which will be picked up by both the Components \u0026 Composables\npnpm build:watch\n```\n\n3. run dev server (app1 or app2)\n\n```sh\npnpm app1:dev\n```\n\n4. run prod build (app1 or app2)\n\n```sh\npnpm app1:build\n\n# or run a full build of everything\npnpm build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghiscoding%2Fvue3-pnpm-workspace","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghiscoding%2Fvue3-pnpm-workspace","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghiscoding%2Fvue3-pnpm-workspace/lists"}