Framework Support

Vue frameworks can define custom components used in <template> region. For example, vue-router provides <router-link> component that could have attributes such as to and replace. Vetur currently provides autocomplete support for the component names and attributes.

Vetur currently provides framework support for the following vue libraries:

Usage

Vetur reads the package.json in your project root to determine if it should offer tags & attributes completions. Here are the exact dependencies and sources of their definitions.

Dependency Source
vue-router Vetur
element-ui element-helper-json
vue-onsenui vue-onsenui-helper-json
bootstrap-vue bootstrap-vue-helper-json
buefy buefy-helper-json
vuetify Bundled in vuetify
gridsome gridsome-helper-json
nuxt / nuxt-legacy / nuxt-ts Bundled in @nuxt/vue-app package, or fallback to nuxt-helper-json
nuxt-edge / nuxt-ts-edge Bundled in @nuxt/vue-app-edge package, or fallback to nuxt-helper-json
quasar / quasar-framework Bundled in quasar (v1+) and quasar-framework (pre v1) packages

Getting element-ui's completions is as easy as running yarn add element-ui and reloading VS Code.

Custom Tags / Attributes

If a package listed in dependencies has a vetur key, then Vetur will try to read the tags / attriutes specified by that key.

{
  "vetur": {
    "tags": "dist/vetur/tags.json",
    "attributes": "dist/vetur/attributes.json"
  }
}

By bundling the tags / attributes definitions together with the framework library, you ensure that users will always get the matching tags / attributes with the specific version of your library they are using.

Adding a Framework

If your Vue UI framework has a lot of users, we might consider adding support for it in Vetur.

Here are the two PRs for Element and Onsen. Open an issue for discussion first before sending PR.

However, you should first consider adding vetur key to your package.json and publishing the tags / attributes together with your package (just as you do for d.ts files).