# vim-vue-plugin [![Build Status][12]](https://travis-ci.com/leafOfTree/vim-vue-plugin)
Vim syntax and indent plugin for `.vue` files. Mainly inspired by [mxw/vim-jsx][1]
## Upgrade
If you installed `vim-vue-plugin` before `3/29/2021`, it's recommended to upgrade to the latest version. After upgrade, you will need to configure in a new way as described at [Configuration](#configuration)
What's New
- Clean code and configuration
- Improved performance
## Installation
You could install it just like other plugins. The filetype will be set to `vue`. Feel free to open an issue or pull request if any questions
How to install
- [VundleVim][2]
```vim
Plugin 'leafOfTree/vim-vue-plugin'
```
- [vim-pathogen][5]
```
cd ~/.vim/bundle
git clone https://github.com/leafOfTree/vim-vue-plugin --depth 1
```
- [vim-plug][7]
```vim
Plug 'leafOfTree/vim-vue-plugin'
:PlugInstall
```
- Or manually, clone this plugin to `path/to/this_plugin`, and add it to `rtp` in vimrc
```vim
set rtp+=path/to/this_plugin
" If filetype is not set to 'vue', try
filetype off
set rtp+=path/to/this_plugin
filetype plugin indent on
```
## How it works
It loads multiple syntax and indent files for `.vue` and enables them to work together
- Blocks (both `template/script/style` and custom blocks) with any syntax, including `pug, typescript, coffee, scss, sass, less, stylus, ...`. Syntax plugins need to be installed if not provided by vim
- Attribute and keyword highlight
- [emmet-vim][10] `html, javascript, css, ...` filetype detection
- Context-based behavior, such as to get current tag or syntax, and set local options like `commentstring`
- A built-in `foldexpr` foldmethod
## Configuration
`g:vim_vue_plugin_config`*dict* is the only configuration. You could copy **default value** below as a starting point
```vim
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 following options
- `syntax`*dict*
- `key`*string*: block's tag name
- `value`*list*: syntax for block
- Syntax is decided by `lang="..."` on block tag
- When no valid `lang="..."` appears on block tag, the first item of `value` will be used as default.
- By default, only syntax files from `['$VIMRUNTIME', '$VIM/vimfiles', '$HOME/.vim']` are loaded. If none is found, then **full** syntax files (including those from plugins) will be loaded
- `full_syntax`*list*: syntax whose **full** syntax files are always loaded
- `initial_indent`*list*: tag/syntax with initial one tab indent. The format can be `tag.syntax`, `tag`, or `syntax`
For boolean options, set `1` to enable or `0` to disable
- `attribute`*boolean*: highlight attribute as expression instead of string
- `keyword`*boolean*: highlight keyword such as `data`, `methods`, ...
- `foldexpr`*boolean*: enable built-in `foldexpr` foldmethod
- `debug`*boolean*: echo debug messages in `messages` list
### Example
Only for demo. Try to set syntax as little as possible for performance
```vim
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,
\}
```
You can still change options as if they are global variables
```vim
let g:vim_vue_plugin_config.foldexpr = 0
```
Note
- `typescript` matches `lang="ts"`
- `list` options can be `string` if only one
- For `.wpy`, `initial_indent` defaults to `['script', 'style']`
- You could check `:h dict` and `:h list` for details about the complex data types
### Archive
Documentation archive - 3/29/2021
Set global variable to `1` to enable or `0` to disable. Ex:
```vim
let g:vim_vue_plugin_load_full_syntax = 1
```
| variable | description | default |
|---------------------------------------|--------------------------------------------------------------------------------------------------------------------------------|----------------------------|
| `g:vim_vue_plugin_load_full_syntax`\* | Enable: load all syntax files in `runtimepath` to enable related syntax plugins.
Disable: only in `$VIMRUNTIME/syntax`, `~/.vim/syntax` and `$VIM/vimfiles/syntax`. | 0 |
| `g:vim_vue_plugin_use_pug`\* | Enable pug syntax for ``. | 0 |
| `g:vim_vue_plugin_use_coffee` | Enable coffee syntax for `