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.jsonin your project root to determine if it should offer tags & attributes completions. Here are the exact dependencies and sources of their definitions.

DependencySource
vue-routerVetur
element-uielement-helper-json
vue-onsenuivue-onsenui-helper-json
bootstrap-vuebootstrap-vue-helper-json
buefybuefy-helper-json
vuetifyvuetify-helper-json
gridsomegridsome-helper-json
nuxt / nuxt-legacy / nuxt-tsBundled in @nuxt/vue-app package, or fallback to nuxt-helper-json
nuxt-edge / nuxt-ts-edgeBundled in @nuxt/vue-app-edge package, or fallback to nuxt-helper-json
quasar-frameworkBundled in quasar package

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).