leafoftree / vim-vue-plugin

Vim syntax and indent plugin for .vue files

vim-vue-plugin

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

How to install

• VundleVim

  Plugin 'leafOfTree/vim-vue-plugin'

• vim-pathogen

  cd ~/.vim/bundle
  git clone https://github.com/leafOfTree/vim-vue-plugin --depth 1
  

• vim-plug

  Plug 'leafOfTree/vim-vue-plugin'
  :PlugInstall

• Or manually, clone this plugin to path/to/this_plugin, and add it to rtp in vimrc

  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 specified syntax, including pug, typescript, coffee, scss, sass, less, stylus, .... Syntax plugins need to be installed if not provided by Vim
• Attribute, directive, and keyword highlight
• emmet-vim 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 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

• syntax
  • key: string. Block tag name
  • value: string list. Block syntax
    • lang="..." on block tag decides the effective syntax
    • When no valid lang="..." 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, then full syntax files, including those from plugins, will be loaded
• full_syntax: string list. Syntax whose full syntax files will always be loaded
• initial_indent: string list. Tag/syntax with initial one tab indent. The format can be tag.syntax, tag, or syntax

For boolean options below, 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.

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

let g:vim_vue_plugin_config.foldexpr = 0

Note

• typescript matches lang="ts"
• list options can be string 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

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

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

  " Example
  autocmd FileType vue inoremap <buffer><expr> : InsertColon()
  
  function! InsertColon()
    let tag = GetVueTag()
    return tag == '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 your vimrc to set local options based on current syntax

  " Example: set local options based on syntax
  function! OnChangeVueSyntax(syntax)
    echom 'Syntax is '.a:syntax
    if a:syntax == 'html'
      setlocal commentstring=<!--%s-->
      setlocal comments=s:<!--,m:\ \ \ \ ,e:-->
    elseif a:syntax =~ 'css'
      setlocal comments=s1:/*,mb:*,ex:*/ commentstring&
    else
      setlocal commentstring=//%s
      setlocal comments=sO:*\ -,mO:*\ \ ,exO:*/,s1:/*,mb:*,ex:*/,://
    endif
  endfunction

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

• mxw/vim-jsx

• Single File Components

See also

• vim-svelte-plugin

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

License

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

vim-vue-plugin's Issues

Html data attribute doesn't highlight correctly

Neovim setup?

Hi I'm trying to set this plugin up on Neovim and it doesn't highlight work at all. When I turn on debug ths is what I get

"~/workspace/richy/app/app/richy/core/static/js/components/item_chart.vue" 478L, 13488B
[vim-vue-plugin] pug: syntax not found in ['$VIMRUNTIME', '$VIM/vimfiles', '$HOME/.vim']
[vim-vue-plugin] pug: load full instead
[vim-vue-plugin] pug: load full
"~/workspace/richy/app/app/richy/core/static/js/components/the_eye.vue" 100L, 2056B
[vim-vue-plugin] pug: syntax not found in ['$VIMRUNTIME', '$VIM/vimfiles', '$HOME/.vim']
[vim-vue-plugin] pug: load full instead
[vim-vue-plugin] pug: load full
"~/workspace/richy/app/app/richy/core/static/js/components/chart.vue" 122L, 2681B
[vim-vue-plugin] pug: syntax not found in ['$VIMRUNTIME', '$VIM/vimfiles', '$HOME/.vim']
[vim-vue-plugin] pug: load full instead
[vim-vue-plugin] pug: load full
[vim-vue-plugin] html: load default

What exacty I'm missing?

Thanks in advance.

commentstring in html section is /* */

This is the best vue syntax i've come across so far. Very nice work!

In between the template tags, I get a commentstring of /%s/ instead of
I'm not sure if the plugin should manage the commentstring or if I have a misconfiguration somewhere.

Appreciate any help!

Sass using vim-emmet issue

When I used vim-emmet in tag <style lang="sass">

I expect when I type t20px it should be

card
   top: 20px

but it is

card
  t20px {
  
  }

Sass syntax is correct. It seems that vim-emmet dosen't determine the filetype is sass
Even it is declared in the style tag
If it works, it will be perfect to me!

Custom syntax block indentation

The new ability to add syntax blocks is awesome, thanks for that!

Do you know is it possible to make indentation work correctly when formatting with gg=G?

It works perfectly with template, script and style parts. But the i18n yaml block (has correct highlighting) but is indented completely wrong with command gg=G.

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

Loading views automatically with autocmd fails

I have an augroup set up that automatically saves and loads the cursor position as well as which folds were open/closed whenever I enter and leave a buffer. Saving the view this way works with this plugin, as well as manually loading the view with the command :loadview but trying to use an autocmd to load this view fails where other filetypes would not. Here is a basic vimrc with VimPlug where this happens:

call plug#begin('~/.config/nvim/plugged')
" Vue indentation
Plug 'leafOfTree/vim-vue-plugin'
call plug#end()

set foldmethod=syntax

" Remember folds when switching buffers
augroup remember_folds
 autocmd!
 autocmd BufLeave,BufWinLeave ?* mkview | filetype detect
 autocmd BufReadPost ?* loadview | filetype detect
augroup END

and the resulting error:

Error detected while processing /home/tradam/.local/share/nvim/view/~=+Documents=+Web=+form=+src=+App.v
ue=:
line  122:
E490: No fold found
Press ENTER or type command to continue

Note that the first time you open a file it is expected to fail, as you have not saved a view yet, but on any subsequent opening of the buffer it should be able to load the view but vue files with this plugin do not(unless called manually with :loadview after the file is open). I speculate what could be happening is the plugin doesn't initialise until after the autocmd is called so vim doesnt yet understand how to apply the folds. This would explain why the manually calling :loadview works and why the view can be saved with autocmd. I have tried setting up the autocmd with various different "groups" but all of them yielded the same error.

Sadly this means that whenever I switch load buffers all the folds are reset and are closed.

Install plugin via pathogen

Stacking indentation of <template>

Using gg=G on a vue buffer produces increasing stacking indentation.

I'm using vim-vue-plugin with those plugins:

Plugin 'tpope/vim-rhubarb'

Plugin 'tommcdo/vim-fubitive'
Plugin 'vim-airline/vim-airline'
Plugin 'vim-airline/vim-airline-themes'

Plugin 'elmindreda/vimcolors'
Plugin 'leafOfTree/vim-vue-plugin'

Plugin 'ctrlpvim/ctrlp.vim'
Plugin 'airblade/vim-gitgutter'
Plugin 'scrooloose/nerdcommenter'
Plugin 'godlygeek/tabular'
Plugin 'ryanoasis/vim-devicons'

Plugin 'thaerkh/vim-workspace'
Plugin 'DavidEGx/ctrlp-smarttabs'
Plugin 'dense-analysis/ale'
Plugin 'Valloric/YouCompleteMe'
Plugin 'tpope/vim-surround'

Add option to set indent width

Hello,

It seems that this plugin (best one I've tried for vue btw ❤️ ) is overriding my global setting of using 4 spaces for indenting.
By default when the plugin is active, new lines are indented with 2 spaces.
Can you add an option to let us choose the indent width, or use the option set in the vimrc by default ?

Thanks for your attention!

Could you link all vuejs attributes to htmlArg?

vue-plugin stops working if vim splits are opened via :Ex

Opening as a single buffer, vue-plugin works fine. Creating a new split with :Explore or its variants (:Vex, :Hex, etc) causes all highlighting to disappear, leaving only grey text. The indent logic is also absent, so I guess the plugin crashes entirely.

Steps to reproduce:

> vim App.vue
:Vexplore      <-- crashes here

Creating a new split via <C-w>v or similar does not crash the plugin immediately, it's only when the content of a split changes to the file explorer.

> vim App.vue
<C-w>v         <-- no issues, works fine
:Explore       <-- crashes here

Opening a file in a split directly via :split or its variants also does not cause the problem.

> vim App.vue
:split foo.bar    <-- no issues, works fine

Given the way this occurs, I would guess it's something to do with netrw.

My vimrc is pretty minimal. I have these other plugins installed:

• vim-airline
• emmet-vim
• vimtex (only loads for .tex files)

style section is not indented if it does not immediately follow a script section

Hello!

I just gave this plugin a try, and must say that it seems to be great so far.

However, I've noticed that, in the case where a <style> section isn't immediately precededed by a <script> section, the <style> section will not be indented. There are 3 such cases I've tried and reproduced the issue:

• <template>...</template> <style>...</style>, i.e. when there simply is no <script> section
• <script>...</script> <template>...</template> <style>...</style>, i.e. when the <script> section comes before the <template> section
• <template>...</template> <style>...</style> <script>...</script>, i.e. when the <script> section comes after the <style> section (against the recommendation in the Vue style guide)

In the example below, I expect text-transform: uppercase; in the <style> section to be indented 1 level, but that doesn't happen.

Actual:

<template>
  <div class="test">
    Test
  </div>
</template>

<style scoped>
.test {
text-transform: uppercase;
}
</style>

Expected:

<template>
  <div class="test">
    Test
  </div>
</template>

<style scoped>
.test {
  text-transform: uppercase;
}
</style>

How to customize the highlight color?

Hi,
Is there a way to customize the color of different gramma words? For example: I want to render "const", "let" with color that is more distinguish(say yellow) from the variable(like "messageGridRef") color? Thanks!

Support pug

To support pug syntax and indent in <template>

There are unexpected indentation problems.

As you can see on this image, there are unexpected indentation problems.
I use gg=G to auto-indent file.

Install plugin via Plug & typo in global variable settings

Namaste,

Add installation information to use Vim Plug & there is a typo in the global variable settings
It is:
let g:vim_uue_plugin_load_full_syntax = 1

Should be:
let g:vim_vue_plugin_load_full_syntax = 1

I am willing to send a pull request for the same.

Cheers,
Ashish

Support Composition Api Syntax

Do this plugin has a plan support composition api syntax highlight ?

it will be very nice.

v-else without value breaks highlighting

"%" key does not work on html/vue tags.

% key has to jump between tags by default in html/vue tags.
(cursor is [<any_char>]. So, [m] means cursor on the "m" char.)

Expected when pressing %:

<te[m]plate>                           <template>
  <vue-tag>                               <vue-tag>
    Dummy data        ===>                  Dummy data
  </vue-tag>                              </vue-tag>
</template>                             <[/]template>

But it doesn't do anything.
If you don't know what % does (I'm pretty sure you do) check it out with :h % in vim

You could check expected behavior with a normal html file.

no syntax highlighting after </template>

:echo GetVueTag() return empty after </template> inside template.

Number with munis sign not highlighted

-10 recognized as a vueScript

Syntax highlighting issue

Seems like if you scroll too fast or do too big a movement command, the syntax highlighting doesn't occur properly - nearly all text stays unhighlighted grey though occasional words are colored incorrectly if the movement is too big/fast, but if you make the text go back off screen and then scroll down slowly it reappears correctly colored.

Stack: vim-vue-plugin > vim-plug > neovim (at head via brew) > alacritty > macbook pro 2018 (mojave)

Proper colouring of closing script tag when there is no semicolumn

Hello,

This is a minor detail, but I noticed that when not adding a semicolon after the last line in the script section of a vue file, the closing </script> tag does not get properly coloured:

It looks fine with a ;` but many ESLint configurations, such as Nuxt's, suggest not adding extra semicolon at the end of JS/TS statements.

Many thanks for your very nice extension!

I wanted something that folds vue files properly. The folds are improper.

I am using the config https://github.com/leafOfTree/vim-vue-plugin#example.

Currently the <template> don't get folded.
It folds the script and style tag but it's weird.

Support coffeescript inside <script lang="coffee">

The coffeescript plugin support is available here : https://github.com/kchmck/vim-coffee-script

no highlight after loading session

After loading session with two or more windows only one window have highlight. Steps to reproduce:
-split window and load 2 different vue files
-save session
-restart vim and load session

Please, support single ticks for language definition

Like not only the <template lang="pug"> but also the <template lang='pug'>.

vim-vue

how is this project related to vim-vue? are they doing the same things?

No highlighting with "wrong" indentation

As you can see in the screenshots highlighting wasn't working when I had my indentation a bit of.
I have g:vim_vue_plugin_highlight_vue_keyword=1 in my vimrc.

Berofe:

After:

Vue SFC custom block support ?

Thanks for this awesome plugin.
can we support Vue SFC custom block like , or something.

e.g. https://github.com/intlify/vite-plugin-vue-i18n
e.g. https://github.com/ktsn/vue-route-generator#route-custom-block

thanks a lot.

String template with quotes causes highlighting error

Codes like below will cause syntax highlighting error:

console.log(`${format('')}`);

Add support for <transition> attributes

Hello again,

I've noticed <transition> attributes (see docs for full list) don't get highlighted like other vue attributes. Here's a screenshot showing what I mean:

These attributes are linked to the htmlTag group instead of VueKey or htmlArg.

I also want to make a small side-note, unrelated to your plugin: do you know if there is a way to link all custom HTML attributes to the htmlArg group ? I know vim just doesn't highlight attributes it doesn't recognize, but it's been driving me crazy and I've been looking for a way to overcome this limitation.

Thanks again for your help and attention, and again, awesome plugin !

'load javascript cluster' is printed every time a file is opened

Version

Plugin: v1.0.20190520
VIM: Vi IMproved 8.1 (2018 May 18, compiled Jun 9 2019 07:22:39)

Description

Currently, opening any .vue file results in load javascript cluster being logged, requiring the user to press enter. This quickly becomes tedious.

Expected behaviour

This should respect g:vim_vue_plugin_debug and only log if debug is enabled.

LICENSE missing?

Hi,
Thank you for the plugin.
Without a license, I could not decide whether I should use this plugin or not.

Could you please clarify under which license do you want to use?

Thanks.

What is this feature?

I put this config in my init.vim:

let g:vim_vue_plugin_config = { 
      \'syntax': {
      \   'template': ['html', 'pug'],
      \   'script': ['javascript', 'typescript', 'coffee'],
      \   'style': ['scss', 'sass', 'less', 'stylus'],
      \   'i18n': ['json', 'yaml'],
      \   'route': 'json',
      \   'docs': 'markdown',
      \   'page-query': 'graphql',
      \},
      \'full_syntax': ['scss', 'html'],
      \'initial_indent': ['script.javascript', 'style', 'yaml'],
      \'attribute': 1,
      \'keyword': 1,
      \'foldexpr': 1,
      \}

And the result is this: template, script, data(), methods, etc. are shrunk, what variable did that do? What are the keyboard shortcuts to show and hide again?

PS.: Sorry for the bad information, I really don't know what it is.

Vue directive color highlight

Hello !

Does your plugin provide an improvement in the syntax of the view directives?
Indeed even having put let g: vim_vue_plugin_highlight_vue_attr = 1 in my vim configuration, the directives syntax does not change anything and always looks like string.
Is it possible to have the same directives syntax highlighting as vscode ?
The first screen below is my vim screen and the second is my vscode screen (with correct non string directive highlight syntax)

Hope you will have an answer, thank you !