Applies to: Visual Studio Visual Studio for Mac
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.
Visual Studio 2022 Preview 2 or later.
Go to the Visual Studio downloads page to install it for free. npm (https://www.npmjs.com/), which is included with Node.js.
Vue.js (Installation | Vue.js (vuejs.org)). Vue.js CLI ((Installation | Vue.js (vuejs.org)).
Give your project and solution a name. In Solution Explorer, right-click the Vue.js project, select Properties, and then go the Debugging section.
Change the Debugger to launch to the launch.json option. npm running the vue-cli-service start command. Check console output for messages, such as a message instructing you to update your version of Node.js.
Support for Script, Style, and Template blocks in .vue files.
Recognition of the lang attribute on .vue files. Vue.js project and file templates. You must have Visual Studio 2017 version 15.8 or a later version installed and the Node.js development workload. This article requires features that are only available starting in Visual Studio 2017 version 15.8. If a required version is not already installed, install Visual Studio 2019.
If you haven't already installed Visual Studio, 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. To create the ASP.NET Core project, you must have the ASP.NET and web development and .NET Core cross-platform development workloads installed.
Create a project
First, you'll create a Vue.js web application project.
You must have the Node.js runtime installed. If you don't have it installed, install the LTS version from the Node.js website.
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 and choose Properties).
These steps assume that you already have some experience with the Vue.js framework. If not, please visit Vue.js to learn more about the framework. Open Visual Studio and create a new project. In Visual Studio 2019, choose Create a new project in the start window.
If the start window is not open, choose File > Start Window. Type web app, choose C# as the language, then choose ASP.NET Core Empty, and then choose Next. On the next screen, name the project client-app, and then choose Next.
Choose either the recommended target framework or .NET 6, and then choose Create. From the top menu bar, choose File > New > Project.
In the left pane of the New Project dialog box, expand Visual C#, then choose Web.
In the middle pane, choose ASP.NET Core Web Application, type the name client-app, and then choose OK.
Select Empty, and then click OK. Visual Studio creates the project, which opens in Solution Explorer (right pane).
If you don't see the ASP.NET Core Web Application project template, you must install the ASP.NET and web development workload and the .NET Core development workload first.
Explore the IDE
To install the workload(s), click the Open Visual Studio Installer link in the left pane of the New Project dialog box (select File > New > Project).
The Visual Studio Installer launches. Select the required workloads. Open the file ./Startup.cs, and add the following lines to the Configure method:.
Go to your command prompt and change the current directory to your project root folder. Type vue init webpack client-app and follow steps when prompted to answer additional questions.
For .vue files, you need to use WebPack or a similar framework with a loader to do the conversion. TypeScript and Visual Studio does not know how to compile .vue files.
The same is true for bundling; TypeScript doesn't know how to convert ES2015 modules (that is, import and export statements) into a single final .js file to load in the browser.
Add a .vue file to the project
Again, WebPack is the best choice here. To drive this process from within Visual Studio using MSBuild, you need to do start from a Visual Studio template.
At present, there is no ASP.NET template for Vue.js development in-the-box. Open the file ./client-app/config/index.js, and change the build.index and build.assetsRoot to wwwroot path:.
In Visual Studio, go to Project > Properties > Build Events.
Build the project
On Pre-build event command line, type npm --prefix ./client-app run build.
Open the file ./client-app/build/webpack.base.conf.js, and add the following properties to the output property:.
Go to your command prompt and change the current directory to the project root folder.
Type vue create client-app, and then choose Manually select features.
Choose Typescript, and then select other desired options. Follow the remaining steps and respond to the questions.
build npm script by configuring a post build event. If you want to modify this setting, open the project file (
Run the application
Open the file ./client-app/tsconfig.json and add noEmit:true to the compiler options.
By setting this option, you avoid cluttering your project each time that you build in Visual Studio.
Next, create a vue.config.js file in ./client-app/ and add the following code.
The preceding code configures webpack and sets the wwwroot folder.
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.