Make WebStorm to understand which vue components are registered globally Make WebStorm to understand which vue components are registered globally vue.js vue.js

Make WebStorm to understand which vue components are registered globally


For those coming here, this is the solution:

  1. Install vue-docgen-web-types in your project (docs): npm i vue-docgen-web-types
  2. Add the following to package.json
    "scripts": {        "update-web-types": "vue-docgen-web-types"    },    "web-types": "./web-types.json",
  1. Run the update-web-types npm command.

If you also want to be able to click on your custom components to navigate to the source file, then you have to do the following since there is currently a pathing bug:

This is what you currently get in the generated web-types.json file:

          "source": {            "module": "./src\\components\\General\\Page.vue",            "symbol": "default"          }

But if you fix the pathing to:

          "source": {            "module": "./src/components/General/Page.vue",            "symbol": "default"          }

The everything works!

So just replace all "//" with "\" after you run the update-web-types npm command.

Jetbrains issues: