[Vuejs]-Working with 'single file' Vue.js components in Orchard / ASP.NET MVC / Razor

In case anyone finds this helpful, I went down the rabbit hole and got webpack installed and working with my ASP.NET project (i.e. Orchard module) and VS2017. Here is a brief summary of the steps I followed, I make no representation this is the “right” way to do it, but it worked for me. – I welcome all feedback, as I am just learning these technologies.

1. Download and Install Node.js (I used the 64 bit installer on windows 10, version 8.11.3 at the time of this writing)

2. Open a command prompt and cd to the folder containing my *.csproj

3. Create default package.json:

   npm init -y

4. Install Webpack:

   npm install webpack –save-dev

5. Install Webpack-cli (note, this might need the –save-dev, not sure anymore)

   npm install -D webpack-cli

6. Modify your package.json file and add a script for webpack:

    "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "wbp" : "webpack"
    },
   

7. Add webpack.config.js with the following:

   const path = require('path')
   const VueLoaderPlugin = require('vue-loader/lib/plugin')
   
   module.exports = {
   
       mode: 'development',
   
       entry: {
           FirstEntry: './Views/Whatever/Index.js',
           SecondEntry: './Views/YupYup/Foobar.js,
           /* rinse and repeat */
           },
   
           output: {
               path: path.resolve(__dirname, 'dist'),
               filename: '[name].js'
           },
   
       module: {
           rules: [
               {
                   test: /\.vue$/,
                   loader: 'vue-loader'
               },
               // this will apply to both plain `.js` files
               // AND `<script>` blocks in `.vue` files
               {
                   test: /\.js$/,
                   loader: 'babel-loader'
               },
               // this will apply to both plain `.css` files
               // AND `<style>` blocks in `.vue` files
               {
                   test: /\.css$/,
                   use: [
                       'vue-style-loader',
                       'css-loader'
                   ]
               }
           ]
       },
   
       plugins: [
           // make sure to include the plugin for the magic
           new VueLoaderPlugin()
       ]
   
   }
   

8. Install webpack loaders and peer dependencies

   npm install babel-core –save-dev

   npm install “babel-loader” –save-dev

   npm install “babel-preset-env” –save-dev

   npm install “css-loader” –save-dev

   npm install “vue-loader” –save-dev

   npm install “vue-style-loader” –save-dev

   npm install “vue-template-compiler” –save-dev

Your package.json devDependencies should now look similar to this:

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^1.0.0",
    "vue-loader": "^15.2.6",
    "vue-style-loader": "^4.1.1",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.1.0"
}

9. Add a pre-build step to your Visual Studio project

   npm run wbp

10 (Optional) Install Vue.js Pack 2017 extension for VS2017

Vue.js Pack 2017

It took some trial and error, some googling and a lot of reading to get this far. Again, I am not certain this is the approved right way, but hopefully this helps someone. Cheers!