Vue component support in Atom

Adds syntax highlighting and snippets to Vue component files in Atom.

Originally converted from vuejs/vue-syntax-highlight.

Working with SCSS/Sass

Since vue-loader redirects language=x to loader style!css!x and sass-loader is using SCSS as default, you need to remap them in webpack.config.js:

vue: {
  loaders: {
    sass: 'style!css!sass?indentedSyntax',
    scss: 'style!css!sass'
  }
}

This is so that this package can support both old Sass and new SCSS. Refer to hedefalk/atom-vue#5 and the official solution for more info.

Usage

Just press TAB or ENTER to unfold a snippet

Single file template

template          <!--Single file component template-->

HTML snippets

router-view       <!--Vuejs router-view component-->
router-link       <!--Vuejs router-link component with named route-->
component         <!--Include component in HTML-->
i18n              <!--Include internationalization component-->

HTML tags

v-for             <!--Vuejs binding for list rendering-->
v-if              <!--Vuejs binding for if conditional rendering-->
v-else-if         <!--Vuejs binding for else if rendering-->
v-else            <!--Vuejs binding for else conditional rendering-->
v-show            <!--Vuejs binding for show conditional rendering-->
v-model           <!--Vuejs binding for model binding-->

Javascript

beforeCreate      // Vuejs instance lifecycle hook for beforeCreate
created           // Vuejs instance lifecycle hook for created
beforeMount       // Vuejs instance lifecycle hook for beforeMount
mounted           // Vuejs instance lifecycle hook for mounted
beforeUpdate      // Vuejs instance lifecycle hook for beforeUpdate
updated           // Vuejs instance lifecycle hook for updated
beforeUpdate      // Vuejs instance lifecycle hook for beforeUpdate
updated           // Vuejs instance lifecycle hook for updated
beforeDestroy     // Vuejs instance lifecycle hook for beforeDestroy
destroyed         // Vuejs instance lifecycle hook for destroyed
vwatch            // Vuejs way to watch instance properties
methods           // Vuejs methods event handlers
components        // Use it when you want to add child components to parent component.
props             // Vuejs way to pass data to child components
vprops            // Vuejs way to pass data to child components with validation
vcomputed         // Vuejs computed property

Vuex

vstore            // Vuex template for a complete store with state,getters,actions and mutations
vmut              // Vuex mutation snippet
vact              // Vuex action snippet
vget              // Vuex getter snippet
vtype             // Vuex constant type snipppet