Visual Studio Vue


This extension provides features like type checking, completion, renaming and refactoring for .vue files by extending TypeScript extension.


This extension is part of VueDX project, maintained by Rahul Kadyan. You can 💖 sponsor him for continued development of this extension and other VueDX tools.


Module Resolution

  • Import Vue files in JS/TS files.
  • Use named exports from Vue files.
  • Infers global components in the project.
  • Accepts configuration for global component resolution.


  • Suggests Vue files in import statement.
  • Suggests named exports from Vue files.
  • Auto import components from Vue files.
    NOTE:This feature requires a tsconfig.json or jsconfig.json file in the project.

Quick Fix

  • Import missing from Vue files.


  • Goto component definition.
  • Goto prop definition.
  • Goto expression definition.


  • Rename prop
  • Rename data
  • Rename computed
  • Rename method
  • Rename variables/functions in setup()
  • Rename component or Vue file


  • Extract expression as a function in setup() function. It automatically adds .value when required.
  • Extract expression as a computed value in setup() function. It automatically adds .value when required.
  • Extract expression as a method (options API). It automatically add this in expressions.
  • Extract expression as a computed property (options API). It automatically add this in expressions.
  • Organize imports and remove unused imports
  • Add variables and functions to return statement of setup() function
  • Extract selected template as a component in current directory or components directories (configured using vueconfig.json)
  • Keep v-for (on root node of selection) in current component when extracting

Known Issues

  • Diagnostics messages complain about JSX/TSX
  • Renaming props does not work in all cases

Made with 💚 for Vue Developers.
— Rahul Kadyan (znck0)


Visual Studio View Encoding

Visual Studio Vue

Visual Studio Vue Intellisense

VueVisual studio vue template

Visual Studio Vue Syntax Highlighting

Vue VSCode Snippets. These snippets were built to supercharge a workflow in the most seamless manner possible. This repo was built particularly for real world use. Install from the Visual Studio Marketplace. The following steps illustrate how to download and install the Syncfusion Blazor Template Studio with the Code Generator extension from the Visual Studio Marketplace., UWP, Xamarin, Flutter, JavaScript, Angular, Blazor, Vue,. Extension for Visual Studio Code - Theme inspired by vue.js. What wasn't mentioned in the recipe however is that the maps need to be manually built beforehand with vue-cli-service build referenced as preLaunchTask in launch.json (or eventually, should the override be possible in Visual Studio 2017/2019 in of.njsproj). Visual Studio 2019 includes improved support for the Vue.js framework, which improves the development experience when creating an application with Vue.