vue.js - *.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

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/