Home

Awesome

<img src="https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/vim-vue-plugin-icon.svg" width="60" height="60" alt="icon" align="left"/>

vim-vue-plugin

<p align="center"> <a href="https://github.com/altercation/vim-colors-solarized"> <img alt="screenshot" src="https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/vim-vue-plugin-screenshot.png" width="260" /> </a> </p>

Vim syntax and indent plugin for .vue files. Mainly inspired by mxw/vim-jsx

Installation

You could install it just like other plugins. The filetype will be set to vue. Feel free to open an issue or a pull request if any questions

<details> <summary><a>How to install</a></summary> <br /> </details>

How it works

It loads multiple syntax and indent files for .vue and enables them to work together

Configuration

g:vim_vue_plugin_config is the only configuration. You can copy its default value below as a starting point

let g:vim_vue_plugin_config = { 
      \'syntax': {
      \   'template': ['html'],
      \   'script': ['javascript'],
      \   'style': ['css'],
      \},
      \'full_syntax': [],
      \'initial_indent': [],
      \'attribute': 0,
      \'keyword': 0,
      \'foldexpr': 0,
      \'debug': 0,
      \}

Description

It has the following options

For boolean options below, set 1 to enable or 0 to disable

Example

Only for demo. Try to set syntax as little as possible for performance.

let g:vim_vue_plugin_config = { 
      \'syntax': {
      \   'template': ['html', 'pug'],
      \   'script': ['javascript', 'typescript', 'coffee'],
      \   'style': ['css', 'scss', 'sass', 'less', 'stylus'],
      \   'i18n': ['json', 'yaml'],
      \   'route': 'json',
      \},
      \'full_syntax': ['json'],
      \'initial_indent': ['i18n', 'i18n.json', 'yaml'],
      \'attribute': 1,
      \'keyword': 1,
      \'foldexpr': 1,
      \'debug': 0,
      \}
<img alt="screenshot" src="https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/vue-config-example.png" />

You can still change options later as if they are global variables.

let g:vim_vue_plugin_config.foldexpr = 0

Note

Context-based behavior

There are more than one language in .vue file. Different mappings, completions, and local options may be required under different tags or syntax (current language filetype)

This plugin provides functions to get the tag/syntax where the cursor is in

It has been renamed to GetVueSyntax, OnChangeVueSyntax from GetVueSubtype, OnChangeVueSubtype for consistency

emmet-vim

Currently emmet-vim works regarding your html, javascript, css, ... emmet settings, but it depends on how emmet-vim gets filetype and may change in the future. Feel free to report an issue if any problem appears

For sass using emmet-vim, please check out this issue

Avoid overload

Since there are many sub-languages included, most delays come from syntax files overload. A variable named b:current_loading_main_syntax is set to vue which can be used as a loading condition if you'd like to manually find and modify the syntax files causing overload

For example, the built-in syntax sass.vim and less.vim in vim8.1 runtime and pug.vim in vim-pug/syntax always load css.vim which this plugin already loads. It can be optimized like

$VIMRUNTIME/syntax/sass.vim

- runtime! syntax/css.vim
+ if !exists("b:current_loading_main_syntax")
+   runtime! syntax/css.vim
+ endif

$VIMRUNTIME/syntax/vue.vim

-   runtime! syntax/html.vim
+ if !exists("b:current_loading_main_syntax")
+   runtime! syntax/html.vim
+ endif

Acknowledgments & Refs

See also

License

This plugin is under The Unlicense. Other than this, lib/indent/* files are extracted from vim runtime