[2.0] Templates for functional components

[Akryum]

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>

[LinusBorg]

We already have this as an option on our roadmap. However, we will pospone this until 2.0 is out of the current post-release phase and all work we have left in the ecosystem for 2.0 is done, because this will involve a considerable amount of work to get right, tested and so on (also, making vue-loader/vueify work with it etc. pp.)

Thanks for the PoC, seems helpful!

[s130059660]

Yes please.
I was looking at exactly that. For me, render functions are too overwhelming and "feels" disjointed from the overall feel of single file component.

[blocka]

What would be most useful to me would be to scope css on to functional components.

[reachtrevor]

Can we get a status update on this functional single file component? I am coming from React and missing this quite a bit.

[Akryum]

It is coming soon.

[rnenjoy]

Can anyone explain for a n00b what its new with this against what we have now?

[Akryum]

You will be able to create functional components with .vue files like this:

<template functional>
  <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 {
  props: ['msg'],
}
</script>

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

[rnenjoy]

Ahh ok thanks!!

[haizop]

That looks great. Any idea of the timeframe for when this feature will be released?

[scottbedard]

This is going to make functional components so much easier to use!

[carrotscarrots]

any updates on this topic ? will it be part of the 2.3 release ?