Pre-compile TypeScript Vue components with template string

Question

I have a Vue site that is built with Webpack. I have a TypeScript file that contains a component:

// my-component.ts

import Vue = require('vue');
    
export default Vue.component("my-component", {
    template: "<div>I am a component</div>"
});

When I try to use this component I get the following warning:

You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Now: how do I pre-compile this template? I know I can define a .vue file and even use TypeScript inside <script></script>, but I would rather define my component in pure TypeScript so that I get nice TypeScript support in WebStorm.

Is this possible?

---

(I know I can also go with the second option by creating an alias for the compiler-included build at vue/dist/vue.js but I feel like this gives me a performance penalty. At the very least, it adds 20kb to my build.)

---

Answer 1

You should be able to use the standalone build to do this, simply add the following to your webpack config (this is for the most recent Vue release):

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}

And it should pull in the standalone build for you, which includes the template option.

---

If you want to have a go at creating your own render functions then you can. At it's most basic you would get:

Vue.component('msg', {
  functional: true,
  render: (createElement, context) => {
    return createElement('div', context.props.message)
  },
  props: ['message']
})

It's a little more complex, but actually not too bad if you really don't like the idea of using .vue files and your templates are relatively straightforward, here's the fiddle for the above component:

https://jsfiddle.net/et67zqdp/

It's then worth taking a look at:

https://v2.vuejs.org/v2/guide/render-function.html

Answer 2

I don't know if this is the go to way or not: But I just create a file in the root of the project (same place where your "package.json" is located) named

"vue.config.js"

module.exports = {
  runtimeCompiler: true
}