Home>
What i am doing

We are currently developing apps with Webpack + Chrome-Extensions.


What ’s wrong?

Prepared in index.html

<body>
    <div>
        <router-view></router-view>
    </div>
    <script src = "./../ scripts/mypage.bundle.js"></script>
</body>

Mounting the above div (#app) with main.js, it is not mounted.

on the browser
<body>
    <!-function (a, b, c, d) {
    return createElement (vm, a, b, c, d, true);
  }->
    <script src = "./../ scripts/mypage.bundle.js"></script>
</body>


Will only be displayed.


File mypage.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import './../../node_modules/bulma/css/bulma.css';
import Buefy from 'buefy';
import 'buefy/lib/buefy.css';
import routes from './routes.js';
Vue.use (VueRouter);
Vue.use (Buefy);
const router = new VueRouter ({
    routes: routes
})
let app = new Vue ({
    router
}). $mount ('# app');
routes.js
import HomePage from './../components/HomePage.vue';
import AtCoderPage from './../components/AtCoderPage.vue';
import CodeforcesPage from './../components/CodeforcesPage.vue';
import CSAPage from './../components/CSAPage.vue';
import AOJPage from './../components/AOJPage.vue';
export default [
    {
        path: '/',
        component: HomePage
    },
    {
        path: '/ AtCoder',
        component: AtCoderPage
    },
    {
        path: '/ Codeforces',
        component: CodeforcesPage
    },
    {
        path: '/ CSA',
        component: CSAPage
    },
    {
        path: '/ AOJ',
        component: AOJPage
    },
];
HomePage.vue
<template>
    <div>
        <div>
            <p>
                home page
            </p>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {}
        }
    }
</script>
<style scoped>
</style>

When it went well

When using only App.vue before installing Vue-Router, it could be mounted and displayed on the screen as follows.

mypage.js
import Vue from 'vue';
import Router from 'vue-router';
import './../../node_modules/bulma/css/bulma.css';
import Buefy from 'buefy';
import 'buefy/lib/buefy.css';
import App from './../components/app.vue';
Vue.use (Buefy);
let app = new Vue (App). $mount ('# app');
app.vue
<template>
    <div>
        <MyHeader></MyHeader>
        <button @ click = "onclick">
            click
        </button>
        <Hello></Hello>
    </div>
</template>
<script>
    import Hello from './Hello.vue';
    import MyHeader from './MyHeader.vue';
    export default {
        data: function () {
            return {
                text: ""
            }
        },
        methods: {
            onclick: function () {
                console.log ("Otao!");
            }
        },
        components: {
            MyHeader,
            Hello
        }
    }
</script>
<style scoped>
</style>
 No newline at end of file

I couldn't find an article that I couldn't mount even after searching the internet.
Thanks for your consideration.

  • Answer # 1

    I wonder if you're loading a version of Vue that doesn't include a template compiler.
    If you want to write a Vue template directly into an HTML file, you need to load a version of Vue that includes a template compiler. However, it is better to avoid as much as possible because the capacity will be increased by 30%.

    Install — Vue.js

    On a version that does not include a compiler, I think that it works if you change it to the following.

    <body>
      <div id = "app"></div>
    let app = new Vue ({
      router,
      render (h) {
        return h ('router-view');
      },
    }). $mount ('# app');