CODEWITHSUNDEEP
npmwebpackvue.js
Shorn Jacob
Shorn Jacob

Reputation: 1251

Vue.js Declarative rendering not working after webpacking

Below is my index.html file

<!doctype html>
<html><head>
  <body>
    <h1>ES</h1>
    <div id="app">
        {{ message }}
      </div> 
      <script src="dist/main.js" type="text/javascript"></script></head>  
  </body>
</html>

I am trying to use basic vue.js declarative rendering. My index.js input for webpack with zero configuration is below

import Vue from 'vue';

var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })

The value of message is not shown in the page . Is this something to do with my webpack configuration. Do I need to use Babel transpiler to get this to work? enter image description here

Upvotes: 1

Views: 279

Answers (1)

Jacob Goh
Jacob Goh

Reputation: 20845

See Explanation of Different Builds in the doc.

The default file for these bundlers (pkg.module) is the Runtime only ES Module build (vue.runtime.esm.js).

Vue build with runtime only doesn't include HTML template compiler, which you need in your case. (Runtime only build is 30% smaller in size)

As the doc mentioned, to import full build of Vue, you may use

import Vue from 'vue/dist/vue.esm.js';

Btw, I highly recommend you to use vue-cli instead of configuring the Vue project yourself.

Upvotes: 1

Related Questions