Tag Archives: VueJS

Using Vue with WebPack

Posted on by
Reply

I wanted to transfer my existing script to WebPack bundle.  The application is a simple page that uses  Vue.js.   Note that I only read Introduction part of Vue and started using it.  At that time, I did not even know the concept of Vue component files .  Thus my application was entirely in one JavaScript file.

I rewrote it using typescript.   WebPack bundling was necessary to make it work.

I had to decipher minor (but important) detail on NPM’s Vue  module that should be used along with WebPack. 

If I were to use a Vue package from node_modules/ and bundle it with WebPack, then the default module that will be used is Runtime-only ES module build (vue.runtime.esm.js.)

Now this verbiage is coming from VueJs.org V2 guide
https://vuejs.org/v2/guide/installation.html#Terms


” If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build:”

This applies to ‘getting started example’ code where  you use template directly on target html file, such as 

<div id="app"> {{message}} </div>

According to Vue documentation, runtime only module is 30% lighter and when I write my code in such a way that it utilize component file (*.vue), then  using vue-loader will precompile all the templates into render function (for those within component file)  so the default settings wil be not an issue.   Issue is when I create a new instance  of the view . 
Again, according to the guide

// this requires the compiler
new Vue({
template: '{{ hi }}'
})

// this does not
new Vue({
render (h) {
return h('div', this.hi)
}
})


If I use the first method but did not configure webpack to use full version of Vue module, resulting bundle file  is missing template compiler and I will be staring at the blank page.  In this situation,  looking into  source with F12 looks something like this

<body><!-- function(a,b,c,d) {.......} --></body>


Then how do I configure Webpack  so that it knows to bundle the full version of vue module instead of runtime-only module?  It was spelled right in the guide above.

module.exports = {
          // ...
          resolve: 
                {
                   //.....,
               alias: {'vue$': 'vue/dist/vue.esm.js' }
               //.......
      }

I needed to add  ‘alias’ clause to  the ‘resolve’ section of module.exports.  (for webpack v2 and above)
WebPack will then bundle full version of Vue module(vue.esm.js). 

Since I didn’t use .vue files for this project and put everything in a single html file, I did not  need to use ‘vue-loader’ either.
So this is a minimal requirement for Vue to work with WebPack.

Vue.js has a very detailed documentation which is good. All I needed was to read it through and understand the meaning of it (lol).  

By the way, another way to make it work is not tell WebPack about Vue at all.

  1. add script tag in your HTML writeup pointing to Vue CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


    2. Then tell Typescript  that ‘Vue’ is a global object

declare let Vue:any

Yes, use the bundler but not bundle the module. It sounds strange but it works