ts-vue-loader

ts-vue-loader

The goal of this loader is to enable HMR and Virtual Dom for VueJS Component written using .ts and vue-property-decorator

If you write your components like this

import { Vue, Component } from 'vue-property-decorator'

@Component({
  template: `<div>Counter : {{ i }}</div>`
})
export default class Count1 extends Vue {
  i: number = 0
  timer?: number

  mounted () {
    this.timer = window.setInterval(() => {
      this.i++
    }, 1000)
  }

  destroyed () {
    if (this.timer) {
      window.clearInterval(this.timer)
    }
  }

}

This loader is for you !

How to install

First you have to install the loader

npm i -D ts-vue-loader

Then add the loader in your webpack configuration

// webpack.config.json
  
  {
    test: /\.tsx?$/,
    use: ['ts-vue-loader', 'ts-loader']
  },

And it should work. A demo project is available in the example directory.

What is happening ?

There are two transformations done by this loader :

• The template string is replaced by a render function (so you don't need to include vue runtime).
• In dev mode the hot reload code is added to reload the component on save (the state is not kept, and the whole component is reloaded)

template: `<div>Counter : {{ i }}</div>`

is converted into :

render: function () { var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._v("Increment : "+_vm._s(_vm.i))])}

and this code is added at the end of your module

App.options.__file = '/home/john-doe/vue-ts-loader/example/src/components/App.ts'
if (module.hot) {(function () {
  var hotApi = require('vue-hot-reload-api')
  hotApi.install(require('vue'), false)
  if (!hotApi.compatible) return
  module.hot.accept()
  if (!module.hot.data) {
    hotApi.createRecord('data-v-27f0d292', App)
  } else {
    hotApi.rerender('data-v-27f0d292', App)
  }
})()}

Improvments

The original Vue-loader is able to rerender components without loosing his state. Since it is quite tricky to detect what changed in your code, this loader will reload the whole component on every change. A good improvment could be to only trigger a rerender based what changed.