Unable to execute/View Vue app inside Liferay DXP

Question

13-Apr-2020:

All, Good evening. I was trying HelloWorld Sample of Liferay plus Vue.js. I was following the instructions given in https://help.liferay.com/hc/en-us/articles/360029028071-Developing-a-Vue-Application. I was able to build the application, but when I am executing the application I am getting the following error. Looks like I am missing something. Could someone please help me out? Many thanks.

14-Apr-2020:

Also, I am seeing in the webpack.config.js (auto-generated) is having only .js as extensions.

Error Message:

ERROR in ../src/App.vue Module Error (from ../node_modules/vue-loader/lib/index.js): vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. @ ../src/index.js 3:0-28 40:19-22 49:6-9 @ ./index.js @ multi ../node_modules/webpack-dev-server/client?http://localhost:8081 ./index.js

.bablerc

{
  "presets": [
    "@babel/preset-env"
  ]
}

.npmbuildrc

{
  "translatorTextKey": "",
  "supportedLocales": [],
  "webpack": {
    "rules": [{
        "test": "src\\\\.*\\.js$",
        "use": "babel-loader"
      },
      {
        "test": "src\\\\.*\\.vue$",
        "use": "vue-loader"
      }
    ]
  }
}

ProjectFolder/webpackFolder/webpack.config.js [Auto Generated]

var path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './index.js',
  output: {
    path: path.resolve(path.join(__dirname, 'build')),
    filename: 'webpack.bundle.js',
  },
  devServer: {
    open: true,
    openPage: '',

    proxy: {},
    publicPath: '/o/projectfolder/',
  },
  plugins: [new require('copy-webpack-plugin')(['../assets'])],
  module: {
    rules: [{
        test: /src\\.*\.js$/,
        use: 'babel-loader'
      },
      {
        test: /src\\.*\.vue$/,
        use: 'vue-loader'
      }
    ],
  },
  resolve: {
    extensions: ['.js']
  }
};