current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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.

Is this possible at all?

PS: 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.

share|improve this question
up vote 0 down vote

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://vuejs.org/v2/guide/render-function.html

share|improve this answer
    
Hey thanks, I should've added to my question that I considered this. But it probably hurts performance? In addition to adding 30kb to the final bundle size... – Maarten yesterday
    
Yes, there is a bit of a trade off, Vue compiles the template at run-time in the standalone build so you have to accept that performance hit (in most cases it's probably negligible). However, if performance is more of an issue then you should consider using .vue files and compiling them instead. Internally vue compiles .vue files into render functions suitable for use with the runtime-only build. – craig_h yesterday

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.