*.vue files, Visual Studio 2017 & TypeScript

Question

Is it possible to edit vuejs's *.vue component files in Visual Studio 2017 with highlighting and intellisense support for HTML, TypeScript AND SCSS?

At the moment, I'm separating the different sections to different files:

<!-- my-component.vue opened in HTML editor -->
<template>
    <div> text </div>
</template>
<script src="./path/to/my-component.ts"></script>
<style src="./path/to/my-component.scss"></style>

Answer 1

I was facing the same difficulty, I end up using Visual Studio Code editor for Vue files and installed this plugin, named Vetur: https://github.com/vuejs/vetur
You can install it by searching on the extensions on the side menu of Visual Studio Code.

Answer 2

Currently the answer is no. The HTML editor is aware of some languages that can be hosted, such as CSS, JavaScript, and Razor (ASP.NET). In these cases, the editor does some fancy things to map sections of the text to each language service. However, TypeScript and SCSS do not support that at the moment, and as far as I know it's not on the backlog for either team.

Please request this using the VS Feedback tool. Since vuejs support this, it bears some weight and may get taken into account for future feature planning. A customer report can sometimes carry more weight than mine.

(Full Disclosure: I work on the team that owns the HTML and SCSS editors in VS. We don't own TypeScript, but we work with the team for things like this.)

Answer 3

There is a Vue plugin for Visual Studio called VuePack that will provide a better dev experience for single page vue files "*.vue" located here: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.VuejsPack-18329

Answer 4

i open it in vs code using the django template extension. and it seems to work, i know it is a different language, but it works in linting and auto formating

Answer 5

After some time, I actually have it all set up in Visual Studio 2017. (Everything except scss)

Here is what I did:

1. Install vue-cli

2. Install VuePack - https://marketplace.visualstudio.com/items?itemName=MadsKristensen.VuejsPack-18329

3. Run this line in command prompt: dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

4. In command prompt, go to the directory where you want to create your application and run this:

   dotnet new vue

   npm install

   This will create the project for you. You can now open the project/add the project in Visual studio 2017.

   However the compiler did not recognize .vue files. I had to add one more manual step:

5. In the root of the application there is a file webpack.config.js, look for module => rules, you need to add a new rule:

   { test: /\.vue$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },

6. After this I ran into some TypeScript compilation errors - the application would just get stuck on Loading... - to fix this you need to edit tsconfig.json - add the following:

   "awesomeTypescriptLoaderOptions": { "useWebpackText": true, "useCache": true, "useTranspileModule": true }

After this I ran the project without issues.

---

Other interesting resources that can help you:

http://www.dotnetcurry.com/aspnet/1383/modern-web-dev-aspnet-core-webpack-vuejs

https://github.com/MarkPieszak/aspnetcore-Vue-starter

https://herringtondarkholme.github.io/2016/10/03/vue2-ts2/