How to use a .vue file?

package.json

"dependencies": {
    "fs-extra": "^6.0.1",
    "global-object": "^1.0.0",
    "run-jxa": "^1.2.0",
    "vue": "^2.5.16"
  },
  "devDependencies": {
    "autoprefixer": "^8.6.5",
    "electron": "^3.0.0-beta.1",
    "electron-builder": "^20.11.1",
    "electron-webpack": "^2.1.2",
    "electron-webpack-eslint": "^2.1.1",
    "electron-webpack-ts": "^2.0.2",
    "electron-webpack-vue": "^2.1.3",
    "eslint-plugin-typescript": "^0.12.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.3",
    "tslint": "^5.10.0",
    "typescript": "^2.9.2",
    "typescript-eslint-parser": "^16.0.1",
    "webpack": "^4.8.1"
  },
  "resolutions": {
    "webpack-sources": "1.1.0"
  }

webpack.renderer.js

const path = require('path');
module.exports = {
    resolve: {
        alias: {
            '@app': path.resolve(__dirname, 'src/app'),
            '@lib': path.resolve(__dirname, 'src/lib'),
            '@common': path.resolve(__dirname, 'src/common'),
            '@static': path.resolve(__dirname, 'static')
        }
    }
};

index.ts

import Vue from 'vue';
import App from './src/app.vue';
new Vue({
    render: h => h(App)
}).$mount('#app');

app.vue

<template>
    <div id="app">
        <p>hello world</p>
    </div>
</template>
<script>
    export default {
        data() {
            return {};
        },
        created() {

        },
        mounted() {

        },
        filters: {},
        methods: {},
        watch: {}
    };
</script>
<style scoped lang="scss">
    #page {
        p{
            font-size: 20px;
        }
    }
</style>

yarn dev Error

  ✖ ｢wdm｣: Hash: d616fa8b57c38340c0f6
  Version: webpack 4.12.2
  Time: 3752ms
  Built at: 2018-07-10 22:17:37
   2 assets
  Entrypoint renderer = styles.css renderer.js
  [./node_modules/css-hot-loader/hotModuleReplacement.js] 2.86 KiB {renderer} [built]
  [./node_modules/electron-webpack/vue-renderer-entry.js] 116 bytes {renderer} [built]
  [./node_modules/lodash/debounce.js] 5.93 KiB {renderer} [built]
  [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {renderer} [built]
  [./node_modules/normalize-url/index.js] 3.85 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/index.js?http://localhost:9080] (webpack)-dev-server/client?http://localhost:9080 7.75 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {renderer} [built]
  [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {renderer} [built]
  [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.6 KiB {renderer} [built]
  [./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {renderer} [built]
  [./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {renderer} [built]
  [./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1010 bytes {renderer} [built]
  [0] multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server css-hot-loader/hotModuleReplacement ./node_modules/electron-webpack/vue-renderer-entry.js ./src/browser/ui/index.ts 76 bytes {renderer} [built]
  [./src/browser/ui/index.ts] 339 bytes {renderer} [built]
  [url] external "url" 42 bytes {renderer} [built]
      + 39 hidden modules

  ERROR in ./src/browser/ui/src/app.vue
  Module Error (from ./node_modules/eslint-loader/index.js):

    ✘  http://eslint.org/docs/rules/  Parsing error: '>' expected  
    src/browser/ui/src/app.vue:2:9
        <div id="app">
             ^

  ✘ 1 problem (1 error, 0 warnings)

  Errors:
    1  http://eslint.org/docs/rules/null
   @ ./src/browser/ui/index.ts 13:0-24
   @ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server css-hot-loader/hotModuleReplacement ./node_modules/electron-webpack/vue-renderer-entry.js ./src/browser/ui/index.ts
  Child html-webpack-plugin for "index.html":
       1 asset
      Entrypoint undefined = index.html
      [./node_modules/html-loader/dist/cjs.js?minimize=false!./dist/.renderer-index-template.html] 347 bytes {0} [built]
  Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/sass-loader/lib/loader.js!node_modules/vue-loader/lib/index.js??vue-loader-options!src/browser/ui/src/app.vue?vue&type=style&index=0&id=4a08c2db&scoped=true&lang=scss:
      Entrypoint mini-css-extract-plugin = *
      [./node_modules/css-loader/index.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/browser/ui/src/app.vue?vue&type=style&index=0&id=4a08c2db&scoped=true&lang=scss] ./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/browser/ui/src/app.vue?vue&type=style&index=0&id=4a08c2db&scoped=true&lang=scss 221 bytes {mini-css-extract-plugin} [built]
      [./node_modules/css-loader/lib/css-base.js] 2.21 KiB {mini-css-extract-plugin} [built]

electron-userland / electron-webpack

How to use a .vue file? #177