I am trying to solve a problem realted to PHPStorm’s and/or WebStorm’s auto-import feature of Vue components.

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

The app projects dependes 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 achive 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 persue 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 chaging the auto-improt 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 portraited 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)

Attachment 4 (MRE on Github)

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

Attachment 5 (IDE settings)

IDE Settings

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