Official Vuetifyjs Atom Extension
JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
keymaps added 4500+ snippets Mar 15, 2018
lib added 4500+ snippets Mar 15, 2018
menus added 4500+ snippets Mar 15, 2018
snippets solved a mistake Apr 14, 2018
spec first commit Mar 14, 2018
styles first commit Mar 14, 2018
.gitignore first commit Mar 14, 2018
CHANGELOG.md updated changelog Apr 14, 2018
ISSUE_TEMPLATE.md first commit Mar 14, 2018
LICENSE license check Mar 14, 2018
README.md Update README.md May 11, 2018
documentation.md removed duplicate keys Mar 24, 2018
package.json Prepare 0.2.2 release Apr 14, 2018

README.md

WORK IN PROGRESS

vuetify-atom

Vuetify atom extension

vuetify-atom is the official extension for Vuetifyjs when working in Atom. It provides snippets and autocomplete functionality for Vuetifyjs.

Documentation

For all snippets available for Atom editor click here

Installation

Command Line

  1. In the terminal, install the package via apm:

    apm install vuetify-atom

GUI

  1. Launch Atom
  2. Open Settings View using Cmd+, on macOS or Ctrl+, on other platforms
  3. Click the Install tab on the left side
  4. Enter vuetify-atom in the search box and press Enter
  5. Click the "Install" button that appears

Usage

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-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.

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-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>

Upcoming features

  • on hover documentation for components and props
  • List of props per component

Changelog

Changelog

Questions

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

License

MIT