Vuetify atom extension
vuetify-atom
is the official extension for Vuetifyjs when working in Atom. It provides snippets and autocomplete functionality for Vuetifyjs.
For all snippets available for Atom editor click here
-
In the terminal, install the package via apm:
apm install vuetify-atom
- Launch Atom
- Open Settings View using Cmd+, on macOS or Ctrl+, on other platforms
- Click the Install tab on the left side
- Enter
vuetify-atom
in the search box and press Enter - Click the "Install" button that appears
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-atom
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.
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-atom
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>
- on hover documentation for components and props
- List of props per component
If you have any questions, ideas or you want to discuss with me. Just raise a issue in vuetify-atom
github repository.