Vuetify
Vuetify sublime extension
Details
Installs
- Total 37K
- Win 21K
- Mac 10K
- Linux 6K
Oct 6 | Oct 5 | Oct 4 | Oct 3 | Oct 2 | Oct 1 | Sep 30 | Sep 29 | Sep 28 | Sep 27 | Sep 26 | Sep 25 | Sep 24 | Sep 23 | Sep 22 | Sep 21 | Sep 20 | Sep 19 | Sep 18 | Sep 17 | Sep 16 | Sep 15 | Sep 14 | Sep 13 | Sep 12 | Sep 11 | Sep 10 | Sep 9 | Sep 8 | Sep 7 | Sep 6 | Sep 5 | Sep 4 | Sep 3 | Sep 2 | Sep 1 | Aug 31 | Aug 30 | Aug 29 | Aug 28 | Aug 27 | Aug 26 | Aug 25 | Aug 24 | Aug 23 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
Mac | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
Linux | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
Readme
- Source
- raw.githubusercontent.com
WORK IN PROGRESS
vuetify-sublime
Vuetify Sublime Text extension
vuetify-sublime
is the official extension for Vuetifyjs when working in Sublime Text. It provides snippets and autocomplete functionality for Vuetifyjs.
Documentation
For all information about available snippets and autocompletion for Sublime Text click here
Installation
Package Control
- Open your Command Palette (Command + Shift + P)
- Search for “Vuetify” to get it from Package Control.
Usage
Autocompletion
Will provide autocomplete for every Vuetify component tag. Ex. typing <
in html
or template
of vue file will provide components list and when you hit tab
, it will expand just like snippet counteparts.
Snippet
You don't need usage example if you are familiar with concept of snippets or you looked up the documentation. But here is an example:
Let's suppose you want to insert Button componenet. For that you have to write full component.
<v-btn>buttonText<v-btn>
But in vuetify-sublime
only writing vBtn
will give you all options available for Button component.
Everything is in camel case and with 'v' prefix which is for Vuetifyjs.
If you want to insert a component with all of its props. Just write v{component-name}WithProps
. This will insert component with all of its props. For example : vBtnWithProps
, vAvatarWithProps
etc.
Templates
Every component in the Vuetify have additional code to write inside it. For example the v-btn-toggle
component have v-btn
inside it. Thats why vuetify-sublime
provides templates for them.
The syntax of template is pretty easy. v{component}Template
or v{component}Template{availableTemplate}
For example vBtnToggleTemplate
will give you following code.
<v-btn-toggle mandatory multiple v-model="value">
<v-btn flat>
<v-icon>icon</v-icon>
</v-btn>
<v-btn flat>
<v-icon>icon</v-icon>
</v-btn>
<v-btn flat>
<v-icon>icon</v-icon>
</v-btn>
<v-btn flat>
<v-icon>icon</v-icon>
</v-btn>
</v-btn-toggle>
and vBtnToggleTemplateTextIcon
will give you following code.
<v-btn-toggle multiple mandatory v-model="value">
<v-btn flat value="value">
<span>text</span>
<v-icon>icon</v-icon>
</v-btn>
<v-btn flat value="value">
<span>text</span>
<v-icon>icon</v-icon>
</v-btn>
<v-btn flat value="value">
<span>text</span>
<v-icon>icon</v-icon>
</v-btn>
<v-btn flat value="value">
<span>text</span>
<v-icon>icon</v-icon>
</v-btn>
</v-btn-toggle>
Changelog
Questions
If you have any questions, ideas or you want to discuss with me. Just raise a issue in vuetify-sublime
github repository.