How to use Visual Studio 2017 and Vue single file components

Question

I use Visual Studio 2017 and have a fair amount of ASPNET Core invested. That being said, I do like using Vue.js 2.0 for some UI workflow stuff on certain pages. I can't seem to find a suitable, and lightweight, way to compile a .vue file (single file component) and end up with a clean output .js and .css file. I've used npm, vue-cli, and webpack, but the resulting .js file for my single file component contains a bunch of other SPA, export, etc. overhead.

Isn't there just an easy way to use VS such that when a .vue file was saved, it would auto-generate the .js and .css file (I use LESS css) cleanly?

I guess the main reason I want to use a .vue file is to get syntax highlighting on the HTML as well as having my all in a common location.

Any thoughts? I would hope you could have configured VS to do a vue-cli (or some other tool) compile upon save like it does with .less files for css, and create a new .js and .css file. Something tells me webpack could do this with a custom config, but no one appears able to articulate exactly how to do this in detail.

Answer 1

For the CSS, you can use the ExtractTextPlugin with webpack: The vue-loader docs have an example on what to put in your webpack config:

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          extractCSS: true
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

For Visual Studio 2017 integration, I suggest using the WebPack Task Runner. If you set it up (via bindings in the Task Runner Explorer) to run webpack in watch mode upon project open, it will rebuild your bundles / CSS upon save.

I don't know the answer to the .js part of your question.