{"action":"closed","issue":{"url":"https://api.github.com/repos/vuejs/vue/issues/3977","repository_url":"https://api.github.com/repos/vuejs/vue","labels_url":"https://api.github.com/repos/vuejs/vue/issues/3977/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue/issues/3977/comments","events_url":"https://api.github.com/repos/vuejs/vue/issues/3977/events","html_url":"https://github.com/vuejs/vue/issues/3977","id":183766382,"number":3977,"title":"[2.0] Templates for functional components","user":{"login":"Akryum","id":2798204,"avatar_url":"https://avatars0.githubusercontent.com/u/2798204?v=4","gravatar_id":"","url":"https://api.github.com/users/Akryum","html_url":"https://github.com/Akryum","followers_url":"https://api.github.com/users/Akryum/followers","following_url":"https://api.github.com/users/Akryum/following{/other_user}","gists_url":"https://api.github.com/users/Akryum/gists{/gist_id}","starred_url":"https://api.github.com/users/Akryum/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Akryum/subscriptions","organizations_url":"https://api.github.com/users/Akryum/orgs","repos_url":"https://api.github.com/users/Akryum/repos","events_url":"https://api.github.com/users/Akryum/events{/privacy}","received_events_url":"https://api.github.com/users/Akryum/received_events","type":"User","site_admin":false},"labels":[{"id":487748339,"url":"https://api.github.com/repos/vuejs/vue/labels/2.x","name":"2.x","color":"c2e0c6","default":false},{"id":217551163,"url":"https://api.github.com/repos/vuejs/vue/labels/feature%20request","name":"feature request","color":"fbca04","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":25,"created_at":"2016-10-18T18:28:25Z","updated_at":"2017-10-11T17:13:54Z","closed_at":"2017-10-11T17:13:53Z","author_association":"MEMBER","body":"I'd like to be able to write templates and `.vue` files for functional components the same way as standard components.\n\nI made a proof-of-concept in [this fiddle](https://jsfiddle.net/Akryum/roLarvdf/), 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`.\n\nIt would look like this:\n\n```\nVue.component('test', {\n  functional: true',\n  props: ['msg'],\n  template: `<div>\n    <h1>{{props.msg}}</h1>\n    <h2>Static content</h2>\n    <span v-for=\"n in 10\">{{n}} </span>\n    <button @click=\"console.log('click', props.msg)\"><slot></slot></button>\n  </div>`,\n});\n```\n\nOr:\n\n```\n<template>\n  <div class=\"test\">\n    <h1>{{props.msg}}</h1>\n    <h2>Static content</h2>\n    <span v-for=\"n in 10\">{{n}} </span>\n    <button @click=\"console.log('click', props.msg)\"><slot></slot></button>\n  </div>\n</template>\n\n<script>\nexport default {\n  functional: true,\n  props: ['msg'],\n}\n</script>\n\n<style scoped>\n.test {\n  margin: 12;\n}\n</style>\n```\n"}}
{"actor":{"display_login":"yyx990803"}}