Vetur Support for Onsen UI & Element UI

Published in

The Web Tub

7 min readFeb 22, 2018

Hello, developers! In this story we will show you a new tool for Vue.js developers called Vetur. We will see how this tool works using two different frameworks: Onsen UI (a beautiful HTML5 hybrid mobile app frameworks) and Element UI (a desktop UI library with many Vue 2.0 based components). Vetur currently supports just both JavaScript libraries.

What is Vetur?

Vetur is a new Vue tooling for Visual Studio Code. It is getting very popular lately due to the exciting features it provides to the developer. That is why Vetur has become VSCode’s default choice for editing Vue files and the second most downloaded plugin on VS Code market.

var Vetur = VS Code + Vue;

Firstly we need to get Vetur. Installing Vetur on VS Code is very simple. We just need to launch VS Code Quick Open (Ctrl+P), write the following command ext install octred.vetur and finally press Enter. Then, Vetur will be installed.

Before trying the autocompletion in Onsen UI and Element UI, we need to learn the basics of Vetur. The following list shows the main and more impressive features of Vetur and how they work with some simple examples.

Snippets

Vetur allows the developer to use a different kind of snippets for each embedded language. It is just necessary to create a specific region to use them. Besides, we can use scaffold snippets for quickly defining regions for our Vue component files.

Let us check this feature. For that, we will create a Vue component with the most common regions: template, script and style. Furthermore, we will create some simple elements.

Creating a Scaffold region using snippets

We can define our snippets as well. For that, we just need to modify the JSON file corresponding to the language we want to use in order to determine the body and description of the snippet. In addition, we will define a new snippet for console.log() to see that.

Enabling a JavaScript Snippet for console.log

Syntax highlighting

Vetur offers syntax highlighting for many languages such as HTML, JavaScript or SASS. We will create two style sections using different style sheet languages as shown below:

Creating two style language section using snippets for Stylus and CSS

As we can see, Vetur automatically identifies both sections and differentiates the elements inside using syntax highlight for each language.

Emmet

Emmet supports for HTML, CSS and other kinds of web files. Using Emmet, web developers can write a bunch of code using snippets quickly. Imagine that we want to create something like this:

Since Emmet is embedded in Vetur, the above snippet can be quickly written as follows:

Formatting

Vetur has support for formatting code in different languages. Therefore, we can change the default configurations in vetur.format.defaultFormatter file as we prefer.

By default, the config is as follows:

"vetur.format.defaultFormatter": {   
   "html": "none",   
   "css": "prettier",   
   "postcss": "prettier",   
   "scss": "prettier",   
   "less": "prettier",   
   "js": "prettier",   
   "ts": "prettier",   
   "stylus": "stylus-supremacy" 
}

IntelliSense

IntelliSense is likely the best feature that Vetur currently provides. With Vetur, we can use IntelliSense in our Vue project for autocompletion of HTML tags and attributes, making programming experience even easier and more natural for developers.

In the following example, we will create some elements using Vue directives such as v-for to show how it works.

With Vetur, we do not need to memorize all the directives for each API that we are using. We can just write something, and the methods with descriptions will appear in VS Code.

In this section, we explained the primary features of Vetur without getting into details (for more information, please check Vetur Documentation). In the next two parts, we will check how the autocompletion from Vetur goes with Onsen UI and Element UI components.

Autocompletion of Onsen UI

The main point of this section is checking how Onsen UI directives are integrated with Vetur. After playing with Vetur, there are many conclusions to underline about autocompletion. The most crucial aspect to remark is the perfect integration with the list of Onsen UI components and their descriptions as shown below:

Onsen Components autocompletion using Vetur

With this autocompletion from Vetur, we do not have to remember the name of each Onsen UI components. This will shorten the programming time for developers.

Closing tag issue

Maybe we need to explain a small problem related to the closing tag of each Onsen UI element in Vetur. When we finish writing a starting tag of an HTML5 element (such as <ul>`), the corresponding closing tag is automatically written instantly.

For example (the _ represents where our cursor):

<ul> _ </ul>

However, with the Onsen UI elements, this fact does not happen. Only the autocomplete the starting tag is done. For example:

<v-ons-card _

This may not be a significant problem but it’s good to know considering how other autocompletion tools currently work.

When we select one of the elements, we still are inside the first tag, waiting for adding some properties or Vue directives. Clicking Ctrl + Space inside each component, a list of possible decorators we could apply to it will appear.

Autocompletion of Element UI

The main point of this section is checking how Element directives are integrated with Vetur IntelliSense. After playing with Vetur on a project using Element UI, there are some conclusions to underline.

The functioning is the same as Onsen, but the main difference is that there are some components without description. The following figure shows how autocompletion works for Element elements.

Element Components autocompletion using Vetur

Just like Onsen UI, if we click Ctrl + Space inside each component and, a list of possible decorators we could use will appear. Moreover, the the closing tag issue also exists in Element UI.

After testing Vetur support for both libraries, we can summarize that Vetur is a necessary plugin for anyone that is interested in web development using Vue.js with any of both libraries. It is because we do not need to memorize each component, just focusing on programming stuff.

Here are the two useful features/changes that Vetur could implement in the future:

Description with example of each component: In addition to the description of each component/element, it’d be awesome to show related use cases. For example, a good schema for the v-ons-list component could be:

<v-ons-list>
 <v-ons-list-header>My friends</v-ons-list-header>
 <v-ons-list-item>Alice</v-ons-list-item>
 <v-ons-list-item>Bob</v-ons-list-item>
 <v-ons-list-item>Eve</v-ons-list-item>
</v-ons-list>

More complicated and useful snippet: in addition to identifying the components and their decorators, it’d be a great idea to add snippets for the most common and/or used components and decorators.. The following example shows how to define two snippets for el-checkbox component — the normal and disabled el-checkbox component.

<el-checkbox disabled></el-checkbox>
<el-checkbox ></el-checkbox>

Conclusion

At this moment Vetur is just available for VS Code, but it seems that in the future, any developer may use Vetur in any editor. We are looking forward to trying it on Monaca IDE.

In spite of being a new library, Vetur is one of the best plugins for Vue.js projects. And this is thanks to the helpful features that it provides to the developers. Moreover, if we are using Onsen UI or Element UI in combination with Vue.js, as we could see in the previous sections, we do not need to learn the whole components’ names list.

Besides, Vetur makes web programming more accessible for the developer even though it is the first time that he programs a web using Vue.js.

Aren’t you using Vuter yet? What are you waiting for?Just install Vetur and quickly start using Vue.js with Onsen UI, a beautiful HTML5 hybrid mobile app frameworks. I hope you find it useful as well!