How to configure JetBrains IDE (PhpStorm or WebStorm) to autocomplete Vue components from sibling project in monorepo

Question

I am trying to solve a problem related to PhpStorm's and/or WebStorm's auto-import feature of Vue components.

I have a monorepo project structure (attachment 1) with a component library project and a regular app project.

The app projects depend on the component library (in package.json). I would like the IDE (PhpStorm, WebStorm) to suggest and auto-import components from the library.

I can achieve this only in a weird situation where I remove package.json from the app (see steps to reproduce).

Is there a way to configure IDE to do this?

Thank you in advance for any advice,

Dan

---

Follow-up question (if there actually is a way), can I pursue the IDE to import the components like this:

import { MyButton } from '@company/foo-library'

instead of

import MyButton from '@company/foo-library/src/components/button/MyButton.vue'

Regarding this issue, I've tried changing the auto-import settings in Settings > Editor > Code Style > TypeScript/JavaScript > Imports > "Do not import exactly from" (see attachment 5), but I never get the import I wanted (the one portrayed above) and I get:

import MyButton from 'packages/foo-library/src/components/button/MyButton.vue';

Steps to Reproduce

1. Clone the repository (Attachment 4)

2. Open the project in PhpStorm (or WebStorm)

3. Open the projects/bar-project/App.vue

4. In template section, start typing <MyButton> (or <MyInput>)

5. IDE does not suggest anything

6. Rename (or delete) file projects/bar-project/package.json

7. Repeat steps 3-4

8. IDE suggests components and after confirmation automatically adds import

Related issues

I believe this is the same issue someone had been trying to resolve on stackoverflow.

Expected Result

IDE suggests and auto-imports components as when the package.json in bar-project is not there.

Actual Result

No component suggestion happening.

---

Attachment 1 (monorepo structure)

.
├── packages
│   └── foo-library # <-- Default Vue app created via npm create vue@latest (with TS enabled)
├── packages.json   # <-- See Attachment 2
└── projects
    └── bar-project # <-- Default Vue app created via npm create vue@latest (with TS enabled)

Attachment 2 (package.json)

{
  "name": "monorepo",
  "version": "1.0.0",
  "main": "index.js",
  "author": "John Doe",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "packages/foo-library",
    "projects/bar-project"
  ]
}

Attachment 3 (YT screencast)

https://www.youtube.com/watch?v=WZPCp6V9GvM

Attachment 4 (MRE on GitHub)

https://github.com/DanCharousek/mre-phpstorm-vue-components-import

Attachment 5 (IDE settings)

Not much. The only thing that seems to be working is to remove the package.json in the project using the UI library which is a no-go.