Vue libraries or frameworks can define custom components used in <template> region. For example, vue-router (opens new window) provides <router-link> (opens new window) component that could have attributes such as to and replace. Of course, you can define custom components as well.
Component Data is JSON files that describe the components' tags / attributes declaratively. Vetur is able to load these JSON files to provide auto-completion, hover information and other language features for the Vue components.
The two main ways of utilizing Component Data are:
🚧 The data format is not specified yet. 🚧
# Supported FrameworksVetur currently bundles Component Data for the following vue libraries:
Vetur reads the package.json in your project root to determine if it should offer tags & attributes completions. Here are the exact dependencies/devDependencies used to determine which Component Data to load.
Getting element-ui's completions is as easy as running yarn add element-ui and reloading VS Code.
If a package listed in dependencies has a vetur key in its package.json, then Vetur will try to read the tags / attributes specified by that key.
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.
# Workspace Component DataYou can define custom tags/attributes for your workspace by specifying a vetur key in package.json. For example, to get auto completion for tag <foo-tag> and it's attribute foo-attr, all you need to do is:
Create a file tags.json with:
Create a file attributes.json with:
Add this line to package.json:
Reload VS Code. You'll get:
foo-bar when completing <|foo-attr when completing <foo-bar |If your Vue UI framework has a lot of users, we might consider bundling its support in Vetur.
You should first consider adding vetur key to your package.json and publishing the tags / attributes together with your package (just as you would do for d.ts files). If you automate the process of generating the Component Data JSON from your source code, then users can always enjoy up-to-date support for your framework.
Here is an example of Nuxt.js (opens new window) adding Component Data support: https://github.com/vuejs/vetur/pull/1921 (opens new window).
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4