Skip to main content

Command Palette

Search for a command to run...

My Essential VS Code Plugins for Vue 3 + Nuxt Projects

Updated
2 min read
My Essential VS Code Plugins for Vue 3 + Nuxt Projects
O

Frontend developer focused on Vue 3, Nuxt, TypeScript & Tailwind. Writing clean, scalable code and sharing what I learn along the way.

As a frontend developer working primarily with Vue 3, Nuxt 3, and TypeScript, having the right tools in place makes all the difference. Over the years, I've tried a lot of VS Code extensions, and here’s the set I currently use in all my Vue projects.

1. Vue - Official (by vuejs)

This is now the one and only extension you need for Vue 3 development. It replaces the deprecated Volar and TypeScript Vue Plugin. It provides:

  • Full support for Vue 3 + TypeScript

  • IntelliSense for Composition API

  • Syntax highlighting and error checking

  • IDE-level integration with your .vue files

If you’re still using Volar separately — it's time to upgrade.

2. Tailwind CSS IntelliSense

Tailwind is my go-to for styling in Nuxt projects. This plugin:

  • Adds class name auto-completion

  • Provides hover previews for colors

  • Supports linting and class sorting

It speeds up the design process tremendously.

3. ESLint

I use ESLint in almost every project to enforce code quality and consistency. With the VS Code plugin:

  • Errors and warnings appear directly in the editor

  • Autofix on save (with a small config tweak)

It keeps your code clean and your brain happy.


4. Prettier

While ESLint catches code issues, Prettier ensures everything is formatted beautifully. I have it configured to format files on save. Together with ESLint, it's the dream team.

5. GitLens

If you're working on teams or even just managing your own commits, GitLens:

  • Shows who changed what, when, and why

  • Adds inline blame annotations

  • Makes Git history browsable directly in VS Code

It's incredibly useful for debugging and understanding context.

6. Vue VSCode Snippets

Speed matters. With snippets, I can scaffold out a component, lifecycle hook, or watcher in seconds. It’s great for productivity.

7. Path Intellisense

This plugin helps me avoid the age-old issue of typing incorrect file paths. It gives me autocomplete suggestions for relative imports — super handy when working with many components.

Final Thoughts

With this setup, my VS Code becomes a powerful ally in writing clean, scalable, and fast Vue 3 / Nuxt applications. The combination of syntax support, formatting, linting, and Git insight makes development not only smoother — but also more enjoyable.

Let me know if you use something else or want to share your setup!

Thanks for reading! I'm Oleksii — a frontend developer who loves clean code, TypeScript, and building things that scale. Feel free to connect with me here or on LinkedIn.

More from this blog

O

oleksiicode

18 posts