Repository files navigation

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

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

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

• Blocks (bothtemplate/script/style and custom blocks) with any specified syntax, includingpug, typescript, coffee, scss, sass, less, stylus, .... Syntax plugins need to be installed if not provided by Vim
• Attribute, directive, and keyword highlight
• emmet-vimhtml, javascript, css, ... filetype detection
• Context-based behavior, such as to get current tag or syntax, and set local options likecommentstring
• A built-infoldexpr foldmethod

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

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

It has the following options

• syntax
  • key:string. Block tag name
  • value:string list. Block syntax
    • lang="..." on block tag decides the effective syntax
    • When no validlang="..." is present, the first syntax in the list will be used.
    • By default, only syntax files from['$VIMRUNTIME', '$VIM/vimfiles', '$HOME/.vim'] are loaded. If none is found, thenfull syntax files, including those from plugins, will be loaded
• full_syntax:string list. Syntax whosefull syntax files will always be loaded
• initial_indent:string list. Tag/syntax with initial one tab indent. The format can betag.syntax,tag, orsyntax

Forboolean options below, set1 to enable or0 to disable

• attribute:boolean. Highlight attribute as expression instead of string
• keyword :boolean. Highlight keyword such asdata,methods, ...
• foldexpr:boolean. Enable built-infoldexpr foldmethod
• debug:boolean. Echo debug messages inmessages list

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

letg: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 later as if they are global variables.

letg:vim_vue_plugin_config.foldexpr=0

Note

• typescript matcheslang="ts"
• list options can bestring if only one
• The first item of syntax list will be used if no "lang=..."
• For.wpy,initial_indent defaults to['script', 'style']
• You could check:h dict and:h list for details about the complex data types

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

• GetVueTag() => String Return value is one of'template', 'script', 'style'

  " ExampleautocmdFileTypevueinoremap<buffer><expr> : InsertColon()function!InsertColon()lettag=GetVueTag()returntag=='template' ?':' :':'endfunction

• GetVueSyntax() => String Return value is one of'html', 'javascript', 'css', 'scss', ...

• OnChangeVueSyntax(syntax) An event listener that is called when syntax changes

  You can define it in yourvimrc to set local options based on current syntax

  " Example: set local options based on syntaxfunction!OnChangeVueSyntax(syntax)echom'Syntax is'.a:syntaxifa:syntax=='html'setlocalcommentstring=<!--%s-->setlocalcomments=s:<!--,m:\ \ \ \ ,e:-->elseifa:syntax=~'css'setlocalcomments=s1:/*,mb:*,ex:*/commentstring&elsesetlocalcommentstring=//%ssetlocalcomments=sO:*\-,mO:*\ \,exO:*/,s1:/*,mb:*,ex:*/,://endifendfunction

It has been renamed toGetVueSyntax, OnChangeVueSyntax fromGetVueSubtype, OnChangeVueSubtype for consistency

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

Forsass using emmet-vim, please check outthis issue

Since there are many sub-languages included, most delays come from syntax files overload. A variable namedb:current_loading_main_syntax is set tovue 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 syntaxsass.vim andless.vim in vim8.1 runtime andpug.vim in vim-pug/syntax always loadcss.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

• mxw/vim-jsx

• Single File Components

• vim-svelte-plugin

  Svelte is a compilation web framework that shares a similar syntax to Vue

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