ktsn / vue-template-loader

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

TypeScript definition #36

Closed CKGrafico closed 7 years ago

CKGrafico commented 7 years ago

In your Readme.md

Unfortunately, this syntax won't work when importing styles using import withRender from './app.html?style=./app.css' as two wildcards (*) are not allowed. In that case, you can sacrifice type safety and use the syntax require('./app.html?style=./app.css') with a standard require definition:

Luckily if you change .html for .css or * seems that is working :)

On the other hand probably you have to add a .d.ts with this definition, I've modified a little and I'm using it like that.

declare module '*.html' {
    import Vue = require('vue')
    interface Template {
      <V extends Vue>(options: Vue.ComponentOptions<V>): Vue.ComponentOptions<V>
      <V extends typeof Vue>(component: V): V
    }
    const template: Template
    export = template
  }
import { Component, Vue } from 'vue-property-decorator';

import Template from './app.component.html';

@Template
@Component
export class AppComponent extends Vue {
}

And I'm experimenting with css, but I don't like the querystring parameters :( (another story)

declare module '*.css' {
    import Vue = require('vue')
    interface Template {
      <V extends Vue>(options: Vue.ComponentOptions<V>): Vue.ComponentOptions<V>
      <V extends typeof Vue>(component: V): V
    }
    const template: Template
    export = template
  }
import { Component, Vue } from 'vue-property-decorator';

import Template from './app.component.html?style=../../dist/css/scripts/app.component.css';

@Template
@Component
export class AppComponent extends Vue {
}
ktsn commented 7 years ago

Thanks for reporting this. I just fixed the docs.