ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Vuetify

by vuetifyjs ST2/ST3

Vuetify sublime extension

Details

Installs

  • Total 35K
  • Win 20K
  • OS X 10K
  • Linux 6K
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 Aug 22 Aug 21 Aug 20 Aug 19 Aug 18 Aug 17 Aug 16 Aug 15 Aug 14 Aug 13 Aug 12 Aug 11 Aug 10 Aug 9 Aug 8 Aug 7 Aug 6 Aug 5 Aug 4 Aug 3
Windows 25 48 22 21 23 42 32 48 24 20 23 38 40 54 38 33 20 30 28 47 42 37 43 35 28 32 39 40 37 47 19 23 40 42 38 36 45 20 25 38 39 35 45 35 22 22
OS X 12 17 16 11 19 18 18 19 15 7 11 19 22 20 23 29 7 11 11 20 23 18 23 4 12 22 19 20 21 15 9 14 17 13 17 23 16 9 7 21 15 12 27 19 10 13
Linux 7 12 6 11 14 14 16 10 15 8 12 15 15 19 10 3 5 10 14 11 12 17 13 3 14 17 11 11 11 11 14 11 17 6 15 14 11 15 5 14 16 12 13 18 7 6

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

  1. Open your Command Palette (Command + Shift + P)
  2. 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

Changelog

Questions

If you have any questions, ideas or you want to discuss with me. Just raise a issue in vuetify-sublime github repository.

License

MIT