Edit

Create a Vue.js application using Node.js Tools for Visual Studio

  • Article

Visual Studio supports app development with the Vue.js framework in either JavaScript or TypeScript.

The following new features support Vue.js application development in Visual Studio:

  • Support for Script, Style, and Template blocks in .vue files
  • Recognition of the lang attribute on .vue files
  • Vue.js project and file templates

Prerequisites

  • You must have Visual Studio 2017 version 15.8 or a later version installed and the Node.js development workload.

    Important

    This article requires features that are only available starting in Visual Studio 2017 version 15.8.

    If a required version isn't already installed, install Visual Studio 2019.

    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.

  • 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 doesn't 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).

Create a Vue.js project using Node.js

You can use the new Vue.js templates to create a new project. Use of the template is the easiest way to get started. For detailed steps, see Use Visual Studio to create your first Vue.js app.

Create a Vue.js project with ASP.NET Core and the Vue CLI

Vue.js provides an official CLI for quickly scaffolding projects. If you would like to use the CLI to create your application, follow the steps in this article to set up your development environment.

Important

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.

Create a new ASP.NET Core project

For this example, you use an empty ASP.NET Core Application (C#). However, you can choose from various projects and programming languages.

Create an Empty project

  • 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 isn't 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.

    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. 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.

Configure the project startup file

  • Open the file ./Startup.cs, and add the following lines to the Configure method:

    app.UseDefaultFiles(); // Enables default file mapping on the web root.
app.UseStaticFiles(); // Marks files on the web root as servable.

Install the vue CLI

To install the vue-cli npm module, open a command prompt and type npm install --g vue-cli or npm install -g @vue/cli for version 3.0 (currently in beta).

Scaffold a new client application using the vue CLI

  1. Go to your command prompt and change the current directory to your project root folder.

  2. Type vue init webpack client-app and follow steps when prompted to answer additional questions.

    Note

    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. 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.

Modify the Webpack configuration to output the built files to wwwroot

  • Open the file ./client-app/config/index.js, and change the build.index and build.assetsRoot to wwwroot path:

    // Template for index.html
index: path.resolve(__dirname, '../../wwwroot/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../../wwwroot'),

Indicate the project to build the client app each time that a build is triggered

  1. In Visual Studio, go to Project > Properties > Build Events.

  2. On Pre-build event command line, type npm --prefix ./client-app run build.

Configure Webpack's output module names

  • Open the file ./client-app/build/webpack.base.conf.js, and add the following properties to the output property:

    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'

Add TypeScript support with the Vue CLI

These steps require vue-cli 3.0, which is currently in beta.

  1. Go to your command prompt and change the current directory to the project root folder.

  2. Type vue create client-app, and then choose Manually select features.

  3. Choose Typescript, and then select other desired options.

  4. Follow the remaining steps and respond to the questions.

Configure a Vue.js project for TypeScript

  1. 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.

  2. Next, create a vue.config.js file in ./client-app/ and add the following code.

    module.exports = {
    outputDir: '../wwwroot',

    configureWebpack: {
        output: {
            devtoolModuleFilenameTemplate: '[absolute-resource-path]',
            devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
        }
    }
};

    The preceding code configures Webpack and sets the wwwroot folder.

Build with vue-cli 3.0

An unknown issue with the vue-cli 3.0 might prevent automating the build process. Each time that you try to refresh the wwwroot folder, you need to run the command npm run build on the client-app folder.

Alternatively, you can build the vue-cli 3.0 project as a pre-build event using the ASP.NET project properties. Right-click the project, choose Properties, and include the following commands in the Build tab, in the Pre-build event command line text box.

cd ./client-app
npm run build
cd ../

Limitations

  • lang attribute only supports JavaScript and TypeScript languages. The accepted values are: js, jsx, ts, and tsx.

  • lang attribute doesn't work with template or style tags.

  • Debugging script blocks in .vue files isn't supported due to its preprocessed nature.

  • TypeScript doesn't recognize .vue files as modules. You need a file that contains code such as the following to tell TypeScript what .vue files look like (vue-cli 3.0 template already includes this file).

    // ./client-app/vue-shims.d.ts
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

  • Running the command npm run build as a pre-build event on the project properties doesn't work when using vue-cli 3.0.

Related content