ktsn / vue-template-loader

Vue.js 2.0 template loader for webpack
MIT License
266 stars 26 forks source link

Can this module work with vue-class-component? #1

Closed fallenleavesguy closed 7 years ago

fallenleavesguy commented 7 years ago

Can this module work with vue-class-component? Can you give me an example, something like best practice. I'm using typescript to write vue, .vue single file component is not friendly in ide or editor,but I need precompile template

ktsn commented 7 years ago

Yes, this loader just add render and staticRenderFns into Vue options object under the hood.

Example in ts:

import Vue = require('vue')
import Component from 'vue-class-component'
import withRender = require('./template.html')

@Component(withRender({
  props: ['someProp']
}))
class MyComponent extends Vue {
  someMethod () {}
}

Make sure to add a declaration file to let TS compiler resolve html import.

declare module '*.html' {
  import Vue = require('vue')
  const withRender: (options: Vue.ComponentOptions<Vue>) => Vue.ComponentOptions<Vue>
  export = withRender
}

BTW, I come up with to allow withRender function to use as decorator. I'm considering to implement that for next version. That will look like following:

import Vue = require('vue')
import Component from 'vue-class-component'
import withRender = require('./template.html')

@withRender
@Component({
  props: ['someProp']
})
class MyComponent extends Vue {
  someMethod () {}
}
fallenleavesguy commented 7 years ago

Thanks!!! decorator in next version is so awesome.

ktsn commented 7 years ago

Released as v0.2.0