Extension for Visual Studio Code - Popular VS Code extensions for Vue.js development providing Syntax highlighting, Code format, Code snippets, IntelliSense, Linting support, npm & node tools.

1. Explore VS Code features in the Interactive Editor Playground. Code Editing in Visual Studio Code - Learn about the advanced code editing features in VS Code. Related resources. User Interface - View the documentation for VS Code. Setup Overview - Documentation for getting up and running with VS Code, including platform specific setup.
2. Click the extensions button (lowest square icon in the editor), and type in Vue VSCode Snippets, select the one by sdras. You can enable tab completion (recommended) by opening Code Preferences Settings (on a Mac) and applying 'editor.tabCompletion': 'onlySnippets' to your personal settings.

You’re browsing the documentation for v2.x and earlier. For v3.x, click here.

Every application reaches a point where it’s necessary to understand failures, small to large. In this recipe, we explore a few workflows for VS Code users who would like to debug their application in the browser.

This recipe shows how to debug Vue CLI applications in VS Code as they run in the browser.

Note: This recipe covers Chrome and Firefox. If you know how to setup VS Code debugging with other browsers, please consider sharing your insights (see bottom of the page).

Prerequisites

Make sure you have VS Code and the browser of your choice installed, and the latest version of the corresponding Debugger extension installed and enabled:

Install and create a project with the vue-cli, following the instructions in the Vue CLI Guide. Change into the newly created application directory and open VS Code.

Displaying Source Code in the Browser

Before you can debug your Vue components from VS Code, you need to update the generated Webpack config to build sourcemaps. We do this so that our debugger has a way to map the code within a compressed file back to its position in the original file. This ensures that you can debug an application even after your assets have been optimized by Webpack.

If you use Vue CLI 2, set or update the devtool property inside config/index.js:

If you use Vue CLI 3, set or update the devtool property inside vue.config.js:

Launching the Application from VS Code

We’re assuming the port to be 8080 here. If it’s not the case (for instance, if 8080 has been taken and Vue CLI automatically picks another port for you), just modify the configuration accordingly.

Click on the Debugging icon in the Activity Bar to bring up the Debug view, then click on the gear icon to configure a launch.json file, selecting Chrome/Firefox: Launch as the environment. Replace content of the generated launch.json with the corresponding configuration:

Setting a Breakpoint

1. Set a breakpoint in src/components/HelloWorld.vue on line 90 where the data function returns a string.

2. Open your favorite terminal at the root folder and serve the app using Vue CLI:

3. Go to the Debug view, select the ‘vuejs: chrome/firefox’ configuration, then press F5 or click the green play button.

4. Your breakpoint should now be hit as a new browser instance opens http://localhost:8080.

Alternative Patterns

Vue Devtools

There are other methods of debugging, varying in complexity. The most popular and simple of which is to use the excellent Vue.js devtools for Chrome and for Firefox. Some of the benefits of working with the devtools are that they enable you to live-edit data properties and see the changes reflected immediately. The other major benefit is the ability to do time travel debugging for Vuex.

Please note that if the page uses a production/minified build of Vue.js (such as the standard link from a CDN), devtools inspection is disabled by default so the Vue pane won’t show up. If you switch to an unminified version, you may have to give the page a hard refresh to see them.

Simple Debugger Statement

The example above has a great workflow. However, there is an alternative option where you can use the native debugger statement directly in your code. If you choose to work this way, it’s important that you remember to remove the statements when you’re done.

Acknowledgements

This recipe was based on a contribution from Kenneth Auchenberg, available here.

In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you'll create and run a simple Vue.js web application.

Important

This article requires the Vue.js template, which is available starting in Visual Studio 2017 version 15.8.

Prerequisites

• You must have Visual Studio installed and the Node.js development workload.

  If you haven't already installed Visual Studio 2019, go to the Visual Studio downloads page to install it for free.

  If you haven't already installed Visual Studio 2017, go to the Visual Studio downloads page to install it for free.

  If you need to install the workload but already have Visual Studio, go to Tools > Get Tools and Features..., which opens the Visual Studio Installer. Choose the Node.js development workload, then choose Modify.

• You must have the Node.js runtime installed.

  If you don't have it installed, we recommend you install the LTS version from the Node.js website for best compatibility with outside frameworks and libraries. Node.js is built for 32-bit and 64-bit architectures. The Node.js tools in Visual Studio, included in the Node.js workload, support both versions. Only one is required and the Node.js installer only supports one being installed at a time.

  In general, Visual Studio automatically detects the installed Node.js runtime. If it does not detect an installed runtime, you can configure your project to reference the installed runtime in the properties page (after you create a project, right-click the project node, choose Properties, and set the Node.exe path). You can use a global installation of Node.js or you can specify the path to a local interpreter in each of your Node.js projects.

Create a project

First, you'll create a Vue.js web application project.

1. If you don't have the Node.js runtime already installed, install the LTS version from the Node.js website.

   For more information, see the prerequisites.

2. Open Visual Studio.

3. Create a new project.

   Press Esc to close the start window. Type Ctrl + Q to open the search box, type Basic Vue.js, then choose Basic Vue.js Web application (either JavaScript or TypeScript). In the dialog box that appears, type the name basic-vuejs, and then choose Create.

   From the top menu bar, choose File > New > Project. In the left pane of the New Project dialog box, expand JavaScript or TypeScript, then choose Node.js. In the middle pane, choose Basic Vue.js Web application, type the name basic-vuejs, and then choose OK.

   If you don't see the Basic Vue.js Web application project template, you must add the Node.js development workload. For detailed instructions, see the Prerequisites.

   Visual Studio creates the new project. The new project opens in Solution Explorer (right pane).

4. Check the Output window (lower pane) for progress on installing the npm packages required for the application.

5. In Solution Explorer, open the npm node and make sure that all the listed npm packages are installed.

   If any packages are missing (exclamation point icon), you can right-click the npm node and choose Install Missing npm Packages.

Explore the IDE

1. Take a look at Solution Explorer in the right pane.

   • Highlighted in bold is your project, using the name you gave in the New Project dialog box. On disk, this project is represented by a .njsproj file in your project folder.

   • At the top level is a solution, which by default has the same name as your project. A solution, represented by a .sln file on disk, is a container for one or more related projects.

   • The npm node shows any installed npm packages. You can right-click the npm node to search for and install npm packages using a dialog box.

2. If you want to install npm packages or run Node.js commands from a command prompt, right-click the project node and choose Open Command Prompt Here.

Add a .vue file to the project

1. In Solution Explorer, right-click any folder such as the src/components folder, and then choose Add > New Item.

2. Select either JavaScript Vue Single File Component or TypeScript Vue Single File Component, and then click Add.

   Visual Studio adds the new file to the project.

Build the project

1. Next, choose Build > Build Solution to build the project.

2. Check the Output window to see build results, and choose Build from the Show output from list.

1. (TypeScript project only) From Visual Studio, choose Build > Clean Solution.

2. Next, choose Build > Build Solution to build the project.

3. Check the Output window to see build results, and choose Build from the Show output from list.

The JavaScript Vue.js project template (and older versions of the TypeScript template) use the build npm script by configuring a post build event. If you want to modify this setting, open the project file (<projectname>.njsproj) from Windows Explorer and locate this line of code:

Run the application

1. Press Ctrl+F5 (or Debug > Start Without Debugging) to run the application.

   In the console, you see a message Starting Development Server.

   Then, the app opens in a browser.

   If you don't see the running app, refresh the page.

2. Close the web browser.

Congratulations on completing this Quickstart! We hope you learned a little bit about using the Visual Studio IDE with Vue.js. If you'd like to delve deeper into its capabilities, continue with a tutorial in the Tutorials section of the table of contents.

Visual Studio Code View In Browser

Next steps