{"id":26022483,"url":"https://github.com/leafOfTree/vim-vue-plugin","last_synced_at":"2025-03-06T09:55:30.629Z","repository":{"id":47441771,"uuid":"150557087","full_name":"leafOfTree/vim-vue-plugin","owner":"leafOfTree","description":"Vim syntax and indent plugin for .vue files","archived":false,"fork":false,"pushed_at":"2023-10-05T03:51:50.000Z","size":582,"stargazers_count":179,"open_issues_count":3,"forks_count":9,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-05T06:36:22.023Z","etag":null,"topics":["emmet","indent","plugin","syntax","vim","vue","wpy"],"latest_commit_sha":null,"homepage":"","language":"Vim Script","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leafOfTree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-09-27T08:50:26.000Z","updated_at":"2025-01-23T23:45:26.000Z","dependencies_parsed_at":"2024-01-02T23:40:13.664Z","dependency_job_id":"1a7efa09-a20c-4220-953c-3f60639c94d0","html_url":"https://github.com/leafOfTree/vim-vue-plugin","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafOfTree%2Fvim-vue-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafOfTree%2Fvim-vue-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafOfTree%2Fvim-vue-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafOfTree%2Fvim-vue-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leafOfTree","download_url":"https://codeload.github.com/leafOfTree/vim-vue-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242187663,"owners_count":20086218,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["emmet","indent","plugin","syntax","vim","vue","wpy"],"created_at":"2025-03-06T09:55:29.563Z","updated_at":"2025-03-06T09:55:30.613Z","avatar_url":"https://github.com/leafOfTree.png","language":"Vim Script","readme":"\u003cimg src=\"https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/vim-vue-plugin-icon.svg\" width=\"60\" height=\"60\" alt=\"icon\" align=\"left\"/\u003e\n\n# vim-vue-plugin\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/altercation/vim-colors-solarized\"\u003e\n\u003cimg alt=\"screenshot\" src=\"https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/vim-vue-plugin-screenshot.png\" width=\"260\" /\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\nVim syntax and indent plugin for `.vue` files. Mainly inspired by [mxw/vim-jsx][1]\n\n## Installation\n\nYou 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\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ca\u003eHow to install\u003c/a\u003e\u003c/summary\u003e\n\n- [VundleVim][2]\n\n    ```vim\n    Plugin 'leafOfTree/vim-vue-plugin'\n    ```\n\n- [vim-pathogen][5]\n\n    ```\n    cd ~/.vim/bundle\n    git clone https://github.com/leafOfTree/vim-vue-plugin --depth 1\n    ```\n\n- [vim-plug][7]\n\n    ```vim\n    Plug 'leafOfTree/vim-vue-plugin'\n    :PlugInstall\n    ```\n\n- Or manually, clone this plugin to `path/to/this_plugin`, and add it to `rtp` in vimrc\n\n    ```vim\n    set rtp+=path/to/this_plugin\n\n    \" If filetype is not set to 'vue', try\n    filetype off\n    set rtp+=path/to/this_plugin\n    filetype plugin indent on\n    ```\n\u003cbr /\u003e\n\u003c/details\u003e\n\n## How it works\n\nIt loads multiple syntax and indent files for `.vue` and enables them to work together\n\n- 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\n- Attribute, directive, and keyword highlight\n- [emmet-vim][10] `html, javascript, css, ...` filetype detection\n- Context-based behavior, such as to get current tag or syntax, and set local options like `commentstring`\n- A built-in `foldexpr` foldmethod\n\n## Configuration\n\n`g:vim_vue_plugin_config` is the only configuration. You can copy its **default value** below as a starting point\n\n```vim\nlet g:vim_vue_plugin_config = { \n      \\'syntax': {\n      \\   'template': ['html'],\n      \\   'script': ['javascript'],\n      \\   'style': ['css'],\n      \\},\n      \\'full_syntax': [],\n      \\'initial_indent': [],\n      \\'attribute': 0,\n      \\'keyword': 0,\n      \\'foldexpr': 0,\n      \\'debug': 0,\n      \\}\n```\n\n### Description\n\nIt has the following options\n\n- **syntax**\n    - **key**: *string*. Block tag name\n    - **value**: *string list*. Block syntax\n        - `lang=\"...\"` on block tag decides the effective syntax\n        - When no valid `lang=\"...\"` is present, the first syntax in the list will be used.\n        - 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\n- **full_syntax**: *string list*. Syntax whose **full** syntax files will always be loaded\n- **initial_indent**: *string list*. Tag/syntax with initial one tab indent. The format can be `tag.syntax`, `tag`, or `syntax`\n\nFor *boolean* options below, set `1` to enable or `0` to disable\n\n- **attribute**: *boolean*. Highlight attribute as expression instead of string\n- **keyword** : *boolean*. Highlight keyword such as `data`, `methods`, ...\n- **foldexpr**: *boolean*. Enable built-in `foldexpr` foldmethod\n- **debug**: *boolean*. Echo debug messages in `messages` list\n\n### Example\n\nOnly for demo. Try to set syntax as little as possible for performance.\n\n```vim\nlet g:vim_vue_plugin_config = { \n      \\'syntax': {\n      \\   'template': ['html', 'pug'],\n      \\   'script': ['javascript', 'typescript', 'coffee'],\n      \\   'style': ['css', 'scss', 'sass', 'less', 'stylus'],\n      \\   'i18n': ['json', 'yaml'],\n      \\   'route': 'json',\n      \\},\n      \\'full_syntax': ['json'],\n      \\'initial_indent': ['i18n', 'i18n.json', 'yaml'],\n      \\'attribute': 1,\n      \\'keyword': 1,\n      \\'foldexpr': 1,\n      \\'debug': 0,\n      \\}\n```\n\n\u003cimg alt=\"screenshot\" src=\"https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/vue-config-example.png\" /\u003e\n\nYou can still change options later as if they are global variables.\n\n```vim\nlet g:vim_vue_plugin_config.foldexpr = 0\n```\n\nNote\n\n- `typescript` matches `lang=\"ts\"`\n- `list` options can be `string` if only one\n- The first item of syntax list will be used if no \"lang=...\"\n- For `.wpy`, `initial_indent` defaults to `['script', 'style']`\n- You could check `:h dict` and `:h list` for details about the complex data types\n\n## Context-based behavior\n\nThere 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)\n\nThis plugin provides functions to get the tag/syntax where the cursor is in\n\n- `GetVueTag() =\u003e String` Return value is one of `'template', 'script', 'style'`\n\n    ```vim\n    \" Example\n    autocmd FileType vue inoremap \u003cbuffer\u003e\u003cexpr\u003e : InsertColon()\n\n    function! InsertColon()\n      let tag = GetVueTag()\n      return tag == 'template' ? ':' : ': '\n    endfunction\n    ```\n\n- `GetVueSyntax() =\u003e String` Return value is one of `'html', 'javascript', 'css', 'scss', ...`\n\n- `OnChangeVueSyntax(syntax)` An event listener that is called when syntax changes\n\n    You can define it in your `vimrc` to set local options based on current syntax\n\n    ```vim\n    \" Example: set local options based on syntax\n    function! OnChangeVueSyntax(syntax)\n      echom 'Syntax is '.a:syntax\n      if a:syntax == 'html'\n        setlocal commentstring=\u003c!--%s--\u003e\n        setlocal comments=s:\u003c!--,m:\\ \\ \\ \\ ,e:--\u003e\n      elseif a:syntax =~ 'css'\n        setlocal comments=s1:/*,mb:*,ex:*/ commentstring\u0026\n      else\n        setlocal commentstring=//%s\n        setlocal comments=sO:*\\ -,mO:*\\ \\ ,exO:*/,s1:/*,mb:*,ex:*/,://\n      endif\n    endfunction\n    ```\n\n\u003e It has been renamed to `GetVueSyntax, OnChangeVueSyntax` from `GetVueSubtype, OnChangeVueSubtype` for consistency\n\n### emmet-vim\n\nCurrently 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\n\nFor `sass` using emmet-vim, please check out [this issue][17]\n\n## Avoid overload\n\nSince 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\n\nFor 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\n\n`$VIMRUNTIME/syntax/sass.vim`\n```diff\n- runtime! syntax/css.vim\n+ if !exists(\"b:current_loading_main_syntax\")\n+   runtime! syntax/css.vim\n+ endif\n```\n\n`$VIMRUNTIME/syntax/vue.vim`\n```diff\n-   runtime! syntax/html.vim\n+ if !exists(\"b:current_loading_main_syntax\")\n+   runtime! syntax/html.vim\n+ endif\n```\n\n## Acknowledgments \u0026 Refs\n\n- [mxw/vim-jsx][1]\n\n- [Single File Components][3]\n\n## See also\n\n- [vim-svelte-plugin][9] \n\n    [Svelte][13] is a compilation web framework that shares a similar syntax to Vue\n\n## License\n\nThis plugin is under [The Unlicense][8]. Other than this, `lib/indent/*` files are extracted from vim runtime\n\n[1]: https://github.com/mxw/vim-jsx \"mxw: vim-jsx\"\n[2]: https://github.com/VundleVim/Vundle.vim\n[3]: https://vuejs.org/v2/guide/single-file-components.html\n[4]: https://github.com/digitaltoad/vim-pug\n[5]: https://github.com/tpope/vim-pathogen\n[6]: https://github.com/Tencent/wepy\n[7]: https://github.com/junegunn/vim-plug\n[8]: https://choosealicense.com/licenses/unlicense/\n[9]: https://github.com/leafOfTree/vim-svelte-plugin\n[10]: https://github.com/mattn/emmet-vim\n[11]: https://github.com/kchmck/vim-coffee-script\n[12]: https://travis-ci.com/leafOfTree/vim-vue-plugin.svg?branch=master\n[13]: https://svelte.dev/\n[14]: https://github.com/leafgarland/typescript-vim\n[15]: https://github.com/HerringtonDarkholme/yats.vim\n[16]: https://github.com/iloginow/vim-stylus\n[17]: https://github.com/leafOfTree/vim-vue-plugin/issues/23#issuecomment-628306633\n","funding_links":[],"categories":["Components \u0026 Libraries","插件","Vim Script","Dev Tools","Dev Tools [🔝](#readme)"],"sub_categories":["Dev Tools","Source Code Editing"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FleafOfTree%2Fvim-vue-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FleafOfTree%2Fvim-vue-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FleafOfTree%2Fvim-vue-plugin/lists"}