How to get your shared Vue components to show IntelliSense in VScode

Hello Everyone👋🏽,

I recently created my very first vue component and pushed it to npm.

I wrote about it here and explained how to create something similar here

I made sure it was well documented and was easy to use, however, my colleague pointed out that he would've preferred if he could see intellisense when he uses the component, something that explains what's expected from him when he's using it.

If you've built anything with vue, and use vscode, I'm pretty sure you've used Vetur

Here's a snippet of the functions Vetur provides

• Syntax-highlighting
• Snippet
• Emmet
• Linting / Error Checking
• Formatting
• Auto Completion
• Debugging

It also has around 16 million installs, so it's pretty popular.

In a recent iteration, they've added framework support.

So to get intellisense and auto-completion on your vue components, we need to add 2 json files in your project folder, and reference them in package.json to get vetur to show you the intellisens and auto-completion.

So let's get started. I'll be using the package I created earlier for this tutorial

1. Create tags.json

If your package has multiple tags, you can start defining their attributes and their description. For now, we only have one tag, so create a new tags.json file in your project root next to package.json

// tags.json

{
  "simple-alert": {
    "attributes": [
      "message",
      "timeout"
    ],
    "description": "A simple alert"
  }
}

2. Create attributes.json

Now we create the attributes.json file which defines each individual attribute as follows

// attributes.json

{
  "simple-alert/message": {
    "type": "string",
    "description": "A string to replace the default message. Default message: Hello Dev.to"
  },
  "simple-alert/timeout": {
    "type": "number",
    "description": "Number of ms to show the alert. Default timeout: 0 ms"
  }
}

As you can see, we first defined the component tag, then we defined which attributes it supports in the tags.json. Then we define each attribute each tag has, it's expected type, and it's description in the attributes.json file

3. Tell Vetur which files to look for

In package.json we add the following

// package.json

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

PS. add the tags.json and attributes.json to the files key in your json file, if you're building the package, so they get included when you push to npm. Like so.

// package.json

...
"files": [
    ...,
    "attributes.json",
    "tags.json"
  ],
...

4. Update git and npm

So now that we've added vetur support, we need to push these updates to npm, so when users install our package they get intellisense and auto-completion

npm version patch

this increments your version patch by 1 and commits the update to git

now we push to github

git push origin

Finally, we republish the package to npm

npm publish

If all works well we should get the below

Now when anyone downloads our package and tries to use it, they'll get intellisense and auto-completion in vscode as follows

I hope you guys enjoyed it, and found it useful.

If you have any questions feel free to shoot them down below😁