Vue JavaScript Tutorial in Visual Studio Code
Skip to content
Visual Studio Code
Docs
Updates
Blog
API
Extensions
FAQ
Learn
Search
Download
Version 1.74 is now available! Read about the new features and fixes from November.
Dismiss this update
Overview
Setup
Overview
Linux
macOS
Windows
Raspberry Pi
Network
Additional Components
Enterprise
Uninstall
Get Started
Intro Videos
Tips and Tricks
User Interface
Themes
Settings
Key Bindings
Display Language
Telemetry
User Guide
Basic Editing
Extension Marketplace
IntelliSense
Code Navigation
Refactoring
Debugging
VS Code for the Web
Tasks
Settings Sync
Snippets
Emmet
Command Line Interface
Workspace Trust
Multi-root Workspaces
Accessibility
Source Control
Overview
Collaborate on GitHub
FAQ
Terminal
Terminal Basics
Terminal Profiles
Shell Integration
Appearance
Advanced
Languages
Overview
JavaScript
JSON
HTML
CSS, SCSS and Less
TypeScript
Markdown
PowerShell
C++
Java
PHP
Python
Julia
Rust
Go
T-SQL
C#
.NET
Node.js / JavaScript
Working with JavaScript
Node.js Tutorial
Node.js Debugging
Deploy Node.js Apps
Browser Debugging
Angular Tutorial
React Tutorial
Vue Tutorial
Ember Tutorial
Debugging Recipes
Performance Profiling
Extensions
TypeScript
Tutorial
Compiling
Editing
Refactoring
Debugging
Python
Tutorial
Editing Code
Linting
Debugging
Environments
Testing
Data Science
Python Interactive
Django Tutorial
Flask Tutorial
Create containers
Deploy Python Apps
Python in the Web
Settings Reference
Java
Getting Started
Navigate and Edit
Refactoring
Formatting and Linting
Project Management
Build Tools
Run and Debug
Testing
Spring Boot
Application Servers
Deploy Java Apps
GUI Applications
Extensions
FAQ
C++
Intro Videos
GCC on Linux
GCC on Windows
GCC on Windows Subsystem for Linux
Clang on macOS
Microsoft C++ on Windows
Build with CMake
CMake Tools on Linux
Editing
Debugging
Configure debugging
Settings
Configure IntelliSense for cross-compiling
FAQ
Docker
Overview
Node.js
Python
ASP.NET Core
Debug
Docker Compose
Registries
Deploy to Azure
Choose a dev environment
Customize
Develop with Kubernetes
Tips and Tricks
Data Science
Overview
Jupyter Notebooks
Data Science Tutorial
Python Interactive
PyTorch Support
Azure Machine Learning
Azure
Extensions
Deployment
Remote Debugging for Node.js
Docker
MongoDB
Kubernetes
Azure Kubernetes Service
Remote
Overview
SSH
Dev Containers
Windows Subsystem for Linux
GitHub Codespaces
VS Code Server
Tunnels
SSH Tutorial
WSL Tutorial
Tips and Tricks
FAQ
Dev Containers
Overview
Tutorial
Attach to Container
Create a Dev Container
Advanced Containers
devcontainer.json
Dev Container CLI
Tips and Tricks
FAQ
Topics
Overview
Overview
Linux
macOS
Windows
Raspberry Pi
Network
Additional Components
Enterprise
Uninstall
Intro Videos
Tips and Tricks
User Interface
Themes
Settings
Key Bindings
Display Language
Telemetry
Basic Editing
Extension Marketplace
IntelliSense
Code Navigation
Refactoring
Debugging
VS Code for the Web
Tasks
Settings Sync
Snippets
Emmet
Command Line Interface
Workspace Trust
Multi-root Workspaces
Accessibility
Overview
Collaborate on GitHub
FAQ
Terminal Basics
Terminal Profiles
Shell Integration
Appearance
Advanced
Overview
JavaScript
JSON
HTML
CSS, SCSS and Less
TypeScript
Markdown
PowerShell
C++
Java
PHP
Python
Julia
Rust
Go
T-SQL
C#
.NET
Working with JavaScript
Node.js Tutorial
Node.js Debugging
Deploy Node.js Apps
Browser Debugging
Angular Tutorial
React Tutorial
Vue Tutorial
Ember Tutorial
Debugging Recipes
Performance Profiling
Extensions
Tutorial
Compiling
Editing
Refactoring
Debugging
Tutorial
Editing Code
Linting
Debugging
Environments
Testing
Data Science
Python Interactive
Django Tutorial
Flask Tutorial
Create containers
Deploy Python Apps
Python in the Web
Settings Reference
Getting Started
Navigate and Edit
Refactoring
Formatting and Linting
Project Management
Build Tools
Run and Debug
Testing
Spring Boot
Application Servers
Deploy Java Apps
GUI Applications
Extensions
FAQ
Intro Videos
GCC on Linux
GCC on Windows
GCC on Windows Subsystem for Linux
Clang on macOS
Microsoft C++ on Windows
Build with CMake
CMake Tools on Linux
Editing
Debugging
Configure debugging
Settings
Configure IntelliSense for cross-compiling
FAQ
Overview
Node.js
Python
ASP.NET Core
Debug
Docker Compose
Registries
Deploy to Azure
Choose a dev environment
Customize
Develop with Kubernetes
Tips and Tricks
Overview
Jupyter Notebooks
Data Science Tutorial
Python Interactive
PyTorch Support
Azure Machine Learning
Extensions
Deployment
Remote Debugging for Node.js
Docker
MongoDB
Kubernetes
Azure Kubernetes Service
Overview
SSH
Dev Containers
Windows Subsystem for Linux
GitHub Codespaces
VS Code Server
Tunnels
SSH Tutorial
WSL Tutorial
Tips and Tricks
FAQ
Overview
Tutorial
Attach to Container
Create a Dev Container
Advanced Containers
devcontainer.json
Dev Container CLI
Tips and Tricks
FAQ
Edit
Using Vue in Visual Studio Code
Vue.js is a popular JavaScript library for building web application user interfaces and Visual Studio Code has built-in support for the Vue.js building blocks of HTML, CSS, and JavaScript. For a richer Vue.js development environment, you can install the Vetur extension which supports Vue.js IntelliSense, code snippets, formatting, and more.
Welcome to Vue
We'll be using the Vue CLI for this tutorial. If you are new to the Vue.js framework, you can find great documentation and tutorials on the vuejs.org website.
To install and use the Vue CLI as well as run the Vue application server, you'll need the Node.js JavaScript runtime and npm (the Node.js package manager) installed. npm is included with Node.js which you can install from Node.js downloads.
Tip: To test that you have Node.js and npm correctly installed on your machine, you can type node --version and npm --version.
To install the vue/cli , in a terminal or command prompt type:
npm install -g @vue/cli
This may take a few minutes to install. You can now create a new Vue.js application by typing:
vue create my-app
where my-app is the name of the folder for your application. You will be prompted to select a preset and you can keep the default (babel, eslint), which will use Babel to transpile the JavaScript to browser compatible ES5 and install the ESLint linter to detect coding errors. It may take a few minutes to create the Vue application and install its dependencies.
Let's quickly run our Vue application by navigating to the new folder and typing npm run serve to start the web server and open the application in a browser:
cd my-app
npm run serve
You should see "Welcome to your Vue.js App" on http://localhost:8080 in your browser. You can press Ctrl+C to stop the vue-cli-service server.
To open your Vue application in VS Code, from a terminal (or command prompt), navigate to the my-app folder and type code .:
cd my-app
code .
VS Code will launch and display your Vue application in the File Explorer.
Vetur extension
Now expand the src folder and select the App.vue file. You'll notice that VS Code doesn't show any syntax highlighting and it treats the file as Plain Text as you can see in the lower right Status Bar. You'll also see a notification recommending the Vetur extension for the .vue file type.
The Vetur extension supplies Vue.js language features (syntax highlighting, IntelliSense, snippets, formatting) to VS Code.
From the notification, press Install to download and install the Vetur extension. You should see the Vetur extension Installing in the Extensions view. Once the installation is complete (may take several minutes), the Install button will change to the Manage gear button.
Now you should see that .vue is a recognized file type for the Vue language and you have language features such as syntax highlighting, bracket matching, and hover descriptions.
IntelliSense
As you start typing in App.vue, you'll see smart suggestions or completions both for HTML and CSS but also for Vue.js specific items like declarations (v-bind, v-for) in the Vue template section:
and Vue properties (methods, computed) in the scripts section:
Go to Definition, Peek definition
VS Code through the Vue extension language service can also provide type definition information in the editor through Go to Definition (F12) or Peek Definition (鈱F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)). Put the cursor over the App, right click and select Peek Definition. A Peek window will open showing the App definition from App.js.
Press Escape to close the Peek window.
Hello World
Let's update the sample application to "Hello World!". In App.vue replace the HelloWorld component msg custom attribute text with "Hello World!".
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld msg="Hello World!"/>
</div>
</template>
Once you save the App.vue file (鈱楽 (Windows, Linux Ctrl+S)), restart the server with npm run serve and you'll see "Hello World!". Leave the server running while we go on to learn about Vue.js client side debugging.
Tip: VS Code supports Auto Save, which by default saves your files after a delay. Check the Auto Save option in the File menu to turn on Auto Save or directly configure the files.autoSave user setting.
Linting
Linters analyze your source code and can warn you about potential problems before you run your application. The Vue ESLint plugin (eslint-plugin-vue) checks for Vue.js specific syntax errors which are shown in the editor as red squigglies and are also displayed in the Problems panel (View > Problems 鈬р寴M (Windows, Linux Ctrl+Shift+M)).
Below you can see an error when the Vue linter detects more than one root element in a template:
Debugging
You can debug client side Vue.js code with the built-in JavaScript debugger. You can learn more from the Vue.js debugging in VS Code recipe on the VS Code debugging recipes site.
Note: There are currently issues with the sourcemaps generated by vue-cli, which cause issues with the debugging experience in VS Code. See https://github.com/vuejs/vue-loader/issues/1163.
Another popular tool for debugging Vue.js is the vue-devtools plug-in.
Other extensions
Vetur is only one of many Vue.js extensions available for VS Code. You can search in the Extensions view (鈬р寴X (Windows, Linux Ctrl+Shift+X)) by typing 'vue'.
There are also Extension Packs which bundle extensions that other people have found useful for Vue.js development.
12/7/2022
In this article there are 7 sectionsIn this article
Welcome to Vue
Vetur extension
IntelliSense
Hello World
Linting
Debugging
Other extensions
Hello from Seattle.
Follow @code
Support
Privacy
Manage Cookies
Terms of Use
License
2022 Microsoft