Vue Syntax Highlight

Sublime Text Syntax highlighting for single-file Vue.js components (enabled by vue-loader or vueify).

Install

• Via Package Control: search for Vue Syntax Highlight.
• Manual: clone this repo into your Sublime Packages folder.

NOTE: You still need to install corresponding packages for pre-processors (e.g. Pug, SASS, CoffeeScript) to get proper syntax highlighting for them.

Enabling JSX Highlighting

The <script> block uses the syntax highlighting currently active for you normal .js files. To support JSX highlighting inside Vue files:

1. Install and set Babel javascript highlighting package, which supports JSX, as your default JS highlighting.

2. Explicitly disable Sublime's default JavaScript package. This allows the Babel package to be applied the embedded <script> in *.vue files. You may need to restart Sublime for this to take effect.

Development

Note: the master branch hosts the new syntax that only works in Sublime build > 3153. For the old syntax, see oldsyntax branch.

• The development of this syntax relies on the YAML-Macros package. You can install it from Package Control.

• Do not edit Vue Component.sublime-syntax directly. Work in Vue Component.sublime-syntax.yaml-macros instead. Once done editing, run "Build With: YAML Macros" from Sublime's command palette. This will update the actual Vue Component.sublime-syntax file.

License

MIT