Web Types generation

To support component recognition by IDEs (WebStorm) Vueless use @vueless/web-types package for Web-Types generation which in turn was be inspired by JetBrains/web-types.

Vueless UI already included latest web-types.json file, so you don't need to do nothing.

But, in some cases you may need to install @vueless/web-types, so for that reason we created optional and zero config package.

When you may need to install it:

• If you going to change default values for props in vueless.config.js.

• If you going to use Vue components from the /component folder without importing them (unplugin) to remove IDE warnings.

• If you using JSDoc for documenting custom components and want to see props description and autocompletion on the go.

Installation

1. Install the package as a dev dependency.

npm

npm install -D @vueless/web-types

yarn

yarn add -D @vueless/web-types

pnpm

pnpm add -D @vueless/web-types

bun

bun add @vueless/web-types -d

2. Run the command to generate web-types.json in the root of the project.

default

# Generate web-types for Vue components from "/src/component" folder.
npx @vueless/web-types

custom path

# Generate web-types for Vue components from "/src" folder.
# You can use you own pattern as well.
npx @vueless/web-types 'src/**/*.vue'

We'd recommend to add this command to postinstall in the project package.json

npm

package.json

{
  ...
  "scripts": {
    ...
    "postinstall": "npx @vueless/web-types"
  }
}

yarn

package.json

{
  ...
  "scripts": {
    ...
    "postinstall": "yarn dlx @vueless/web-types"
  }
}

pnpm

package.json

{
  ...
  "scripts": {
    ...
    "postinstall": "pnpx @vueless/web-types"
  }
}

bun

package.json

{
  ...
  "scripts": {
    ...
    "postinstall": "bunx @vueless/web-types"
  }
}

3. Declare web-types in the project package.json.

package.json

{
  ...
  "web-types": "./web-types.json"
}

It will be added automatically when you start the project in dev mode npm run dev. Vueless Vite plugin do this magic for you ✨