[Vuejs]-How to render data in Vue instance of Vue Cli project

by

1👍

✅

To complement @Ferrybig’s answer

You replied Your solution only works when we use a direct include vue.js file. Failed when use vue-cli or webpack vue-loader. to @Ferrybig’s answer.

The reason is that https://cdn.jsdelivr.net/npm/vue/dist/vue.js is a full build of Vue. But by default, vue-cli use a Runtime-only build (to improve performance).

In order to use a full Vue build for your vue-cli project, find your webpack config and change vue$ alias to be like this:

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

This is explained in https://v2.vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds .

👤Jacob Goh

1👍

You are overriding the render function, the render function tell what your componenents should render:

new Vue({
    ...
    render: h => h(App)
}).$mount('#app');

Remove the custom render function, and it will use a template from the element you mount it on.

// import Vue from 'vue'
// import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    data() {
        return {
            msg: "Hello from Vue!"
        }
    },
}).$mount('#app');
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  {{msg}}
</div>
👤Ferrybig

Leave a comment