vue-awesome-snippets package
This package contains snippets for write components of Vue.js as in HTML, .vue files and Javascript respectively.
You can see below the commands and its description.
Snippets for HTML
v-if directive
| Command | Description |
|---|---|
| vif | Create a block of HTML with the v-if directive |
| vifin | Write the directive inside a tag |
| vifid | Create a block of HTML adding an id attribute |
| vifclass | Create a block of HTML adding a class attribute |
| vifidclass | Create a block of HTML adding and id and a class attribute |
| vifel | Create a block of HTML with the if else structure in vue |
v-for directive
| Command | Description |
|---|---|
| vfor | Create a block of HTML with v-for directive |
| vforin | Write the directive inside a tag |
| vforid | Create a block of HTML with v-for directive adding an id attribute |
| vforclass | Create a block of HTML with v-for directive adding a class attribute |
| vforidclass | Create a block of HTML with v-for directive adding an id and a class attribute |
| vford | Create a block of HTML with v-for directive and keep write inside of the tag |
v-model directive
| Command | Description |
|---|---|
| vmo | Create a block of HTML with v-model directive |
| vmoin | Create a block of HTML with v-model directive and keep write inside of the tag |
| vmoinput | Create a input tag with the v-model directive |
v-bind directive
| Command | Description |
|---|---|
| vbind | Create a block of HTML with v-bind directive |
| vbindin | Write the directive inside a tag |
| vbindclass | Create a block of HTML with v-bind directive adding a class attribute |
| vbindid | Create a block of HTML with v-bind directive adding an id attribute |
| vbindidclass | Create a block of HTML with v-bind directive adding an id and a class attribute |
| vbinds | Write the v-bind shorthand style |
v-on directive
| Command | Description |
|---|---|
| von | Create a block of HTML with v-on directive |
| vonin | Write the directive inside of the tag |
| vonid | Create a block of HTML with v-on directive adding an id attribute |
| vonclass | Create a block of HTML with v-on directive adding a class attribute |
| vonidclass | Create a block of HTML with v-on directive adding an id and a class attribute |
Templates
| Command | Description |
|---|---|
| vtem | Create a new template structure |
| vtemd | Create a new template structure letting the cursor inside the tag |
Snippets of Vue for JS files
| Command | Description |
|---|---|
| vnew | Create a new structure of Vue |
| vcom | Create a new structure for a component |