[2.0] Templates for functional components

I’d like to be able to write templates and .vue files for functional components the same way as standard components.

I made a proof-of-concept in this fiddle, but it’s quite hacky. Maybe the template compiler could have a functional option to make the resulting functions more adapted to the context object and not this.

It would look like this:

Vue.component('test', {
  functional: true',
  props: ['msg'],
  template: `<div>
    <h1>{{props.msg}}</h1>
    <h2>Static content</h2>
    <span v-for="n in 10">{{n}} </span>
    <button @click="console.log('click', props.msg)"><slot></slot></button>
  </div>`,
});

Or:

<template>
  <div class="test">
    <h1>{{props.msg}}</h1>
    <h2>Static content</h2>
    <span v-for="n in 10">{{n}} </span>
    <button @click="console.log('click', props.msg)"><slot></slot></button>
  </div>
</template>

<script>
export default {
  functional: true,
  props: ['msg'],
}
</script>

<style scoped>
.test {
  margin: 12;
}
</style>

[Akryum]

It is coming soon.

[yyx990803]

Yes, Vue 2.5 + vue-loader 13.3 will have proper support for template compilation, scoped CSS and hot-reload for functional components 😃