Vue 3 Mono Repo how to use the root dev dependancies

Question

I setup a mono repo using Ionic and Vue 3 the only issue is that in my child apps I still need to add the following into package.json. How can I use the root devDepenencies?

"devDependencies": {
   "@vue/cli-plugin-typescript": "~5.0.0-rc.1"
},

Here is my structure:

apps
  - app1
    - package.json <-- here i have to add devDependency
    - tsconfig.json
  - app2
    - package.json <-- here i have to add devDependency
    - tsconfig.json
package.json <-- devDependency is in here too
tsconfig-base.json

Everything works this way but it creates a node_modules folder with a ton of dependencies in each child app. I'd like to avoid that if possible.

If I remove the devDependency I get the following error:

Module not found: Error: Can't resolve './src/main.js'

So its not seeing the dependency and thinking I'm using js but in fact i'm using typescript.

I tried setting the baseUrl in the tsconfigs but nothing has worked yet. Any help would be greatly appreciated.

user_4941530 · Answer

Instead of configuring vue to find it you could set up a path link:

"devDependencies": {
    "@vue/cli-plugin-typescript": "link:../node_modules/@vue/cli-plugin-typescript"
}

user_1423825 · Answer

This would likely be your solution if you're using a monorepo. Add the following to your app1 and app2 package.json:

{
  "vuePlugins": {
   "resolveFrom": "insert path to parent package.json here"
  }
}

See documentation here: https://cli.vuejs.org/guide/plugins-and-presets.html#installing-plugins-in-an-existing-project

Vue 3 Mono Repo how to use the root dev dependancies

2 Answers