Final Vim Vue Setup | Pragmatic Pineapple 🍍

I’ve lately began working with Vue 3 and Nuxt 3 so I had to determine the way to get correct improvement expertise in my favourite editor – Vim. Sure, I may have switched to VSCode or another trendy editor / IDE, however it’s exhausting for me. I’m a kind of people who realized Vim early in his profession and now I’ve Vim syndrome – in each editor I’m going to, I attempt to make it like house (Vim).

Earlier than, I labored principally with React and TypeScript, and I’ve a well-liked publish on the way to configure TypeScript in Vim. In my present work, the TypeScript stayed however I converted to the Vue world. I’ll write extra matters about that sooner or later, so you’ll be able to subscribe to the e-newsletter to observe alongside (it’s free).

Vue’s been nice for these final 6 months, I’ve gotten to love it and it feels pure. However oh boy, the primary couple of weeks had been hell. Principally as a result of I lacked editor assist I wanted. Sure, I did have the TypeScript setup I discussed, nevertheless it wasn’t sufficient. My colleagues had been asking me if I’ve some form of a Vue language instrument/plugin put in. I used to be ashamed to reply that, however the reality was I used to be working at the hours of darkness.

Someday, I needed so as to add a correct setup for Vue, and nothing may cease me. I additionally should admit I switched to Neovim within the meantime, however I’ll write about that in one other publish. There are a bunch of recommendation and setups on the net, however I may by no means discover the one I may observe by way of simply. That’s the primary cause I’m penning this weblog publish – I got here up with a easy means you may get going with Vue. Let’s get began.

Vue Syntax Spotlight in Vim

To get began, we’ll want some syntax highlighting. For those who’re utilizing Neovim, you need to already be lined. For those who’re utilizing the newest Vim (mine is 9.1 on the time of writing) you then’ll even have some syntax highlighting.

If that’s not working, attempt a well-liked plugin for Vue syntax:

I’m utilizing vim-plug to put in plugins, so I’ve a line like this in my .vimrc:

After including the road, run :PlugInstall and you need to be good.

For TypeScript syntax, you need to be lined. Each Neovim and Vim have out-of-the-box assist for it. If not, attempt to replace them.

Cool, let’s transfer on to essentially the most helpful a part of the setup – code completion and options!

VSCode-like Setup

Many of us are going to roll their eyes over on this part. Why? As a result of I’ll counsel an easy answer as a substitute of digging deep and configuring every thing your self. Nothing incorrect with any of these approaches. I really feel like it’s simpler to begin shortly, relatively than slowly.

To attain a simple and easy begin to enhancing and studying Vue information in Vim, we are going to use coc.nvim. CoC is a Swiss-army knife of Vim. It’s largely impressed by VSCode and as soon as configured, it most likely is. I wouldn’t know as a result of I by no means transformed to a full-time VSCode consumer.

To arrange coc.nvim plugin, it’s essential to embody the plugin in your .vimrc:

Plug 'neoclide/coc.nvim', {'department': 'launch'}

After which do :PlugInstall so the plugin will get put in.

However wait, there’s extra. We have to set up a Vue language instrument to present us completions and documentation within the editor.

Putting in Volar – Vue language instruments

Putting in CoC shouldn’t be sufficient, we have to set up Volar – a Vue language instrument that may really assist us write code. Fortunately, there’s a coc-volar plugin we are able to set up. It’s endorsed by the parents who developed the “uncooked” model of it over at Vue language instruments. For those who’re utilizing vim-plug, you’ll be able to set up it as a plugin like so:

Plug 'yaegassy/coc-volar', { 'do': 'yarn set up --frozen-lockfile' }
Plug 'yaegassy/coc-volar-tools', { 'do': 'yarn set up --frozen-lockfile' }

After you’ve added these three plugins, go forward and run :PlugInstall. The coc.nvim will pickup out-of-the-box coc-volar and coc-volar-tools in the event that they’re put in through vim-plug.

:CocInstall @yaegassy/coc-volar

:CocInstall @yaegassy/coc-volar-instruments

Earlier than testing out every thing, let’s be sure that our setup will work properly.

Enabling “Takeover Mode”

To verify every thing works properly, let’s allow the so-called “Takeover Mode”. The “Takeover Mode” is there to enhance the efficiency of the Vue language instruments. Briefly, it disabled the default TypeScript language service and solely ran the Vue language service. That’s as a result of Volar creates a separate TypeScript language service patched with Vue specifics. In order that’s why we’re turning the default TS language service.

To allow “Takeover Mode”, do that:

1. Open one of many *.vue, *.ts, *.js, *.tsx, or *.jsx file.
2. Run :CocCommand volar.initializeTakeOverMode.
3. When prompted by Allow Take Over Mode? (y/n)?, enter y
4. The .vim/coc-settings.json file might be created within the root of the venture.
   • The "volar.takeOverMode.enabled": true and "tsserver.allow": false settings might be added.
5. coc.nvim will restart and the settings will mirror.

You possibly can both commit the .vim/coc-settings.json or add it to the .gitignore file. In both case, Vim/Neovim will choose up settings from there and ensure just one occasion of the TypeScript language service is working and displaying errors/options.

Nice, now that we received that out of the best way, let’s see all of this in motion!

Prepared, Set, Motion

Right here’s how the described setup works:

We created a easy Vue element HelloWorld.vue with two variables and a perform that we didn’t outline. Fortunately, Volar confirmed three errors within the file. We did what Volar advised and outlined one variable and a perform. After that, just one error was left, however we left that for one more day since that is solely a showcase venture.

That’s it! You’re able to edit and skim Vue code with confidence utilizing Vim/Neovim setup. Right here’s the complete listing of plugins I confirmed you:

Plug 'posva/vim-vue'


Plug 'neoclide/coc.nvim', {'department': 'launch'}


Plug 'yaegassy/coc-volar', { 'do': 'yarn set up --frozen-lockfile' }
Plug 'yaegassy/coc-volar-tools', { 'do': 'yarn set up --frozen-lockfile' }

As a bonus, I’ll share a few of the suggestions you need to use.

BONUS: Common suggestions

I additionally use Prettier and ESLint for higher code hygiene, and I’ve a few strains in my setup to verify coc.nvim picks them up:

if isdirectory('./node_modules') && isdirectory('./node_modules/prettier')
  let g:coc_global_extensions += ['coc-prettier']
endif


if isdirectory('./node_modules') && isdirectory('./node_modules/eslint')
  let g:coc_global_extensions += ['coc-eslint']
endif

These strains will verify whether or not the venture you’re working with has prettier and eslint put in. In that case, coc.nvim will set up these plugins.

Then, inside my coc-settings.json (you’ll be able to open it out of your editor utilizing :CocConfig), I’ve this:

{
  "coc.preferences.formatOnSave": true,
  "volar.allow": true,
  "eslint.autoFixOnSave": true
}

With that in your setup, you’ll get auto-formatting on save by Prettier and ESLint – how neat!

For those who like this, I’ve extra inside my dotfiles on GitHub.

Summing Up

That’s all, people! On this weblog publish, we confirmed a few issues:

1. How to verify Vue syntax is rendering correctly
2. How set up coc.nvim and use it
3. Set up Volar for Vim and Neovim
4. And as a bonus, the way to arrange Prettier and ESLint to auto-format your code

I’m fairly happy with what we’ve achieved. In one of many subsequent posts, I’ll present you the way to obtain an analogous factor however utilizing Neovim and one thing that’s not coc.nvim. To be sure to’re up-to-date, subscribe to the e-newsletter, the place I’ll share any new updates. Additionally, share this publish with pals and associates in the event you discover it helpful.

Thanks for studying, and till subsequent time, cheers!