diff --git a/compiler/generate/index.js b/compiler/generate/index.js
index f73b4a90b3..ae9d979952 100644
--- a/compiler/generate/index.js
+++ b/compiler/generate/index.js
@@ -489,6 +489,10 @@ export default function generate ( parsed, source, options ) {
 				state = {};
 			};
 
+			this.appendChild = function appendChild ( child ) {
+				this.yield.appendChild(child)
+			}
+
 			${initStatements.join( '\n\n' )}
 		}
 	` );
diff --git a/compiler/generate/visitors/MustacheTag.js b/compiler/generate/visitors/MustacheTag.js
index a7078e1e28..a0b94c908e 100644
--- a/compiler/generate/visitors/MustacheTag.js
+++ b/compiler/generate/visitors/MustacheTag.js
@@ -3,14 +3,20 @@ import deindent from '../utils/deindent.js';
 export default {
 	enter ( generator, node ) {
 		const name = generator.current.counter( 'text' );
+		const { snippet } = generator.contextualise( node.expression );
 
 		generator.addSourcemapLocations( node.expression );
-		const { snippet } = generator.contextualise( node.expression );
 
-		generator.addElement( name, `document.createTextNode( ${snippet} )`, true );
+		if (node.expression.name === 'yield') {
+			generator.current.initStatements.push( deindent`
+				component.yield = ${generator.current.target};
+			` );
+		} else {
+			generator.addElement( name, `document.createTextNode( ${snippet} )`, true );
 
-		generator.current.updateStatements.push( deindent`
-			${name}.data = ${snippet};
-		` );
+			generator.current.updateStatements.push( deindent`
+				${name}.data = ${snippet};
+			` );
+		}
 	}
 };
diff --git a/test/compiler/component-yield/Widget.html b/test/compiler/component-yield/Widget.html
new file mode 100644
index 0000000000..2528571ca1
--- /dev/null
+++ b/test/compiler/component-yield/Widget.html
@@ -0,0 +1 @@
+<div class="sidebar-widget">{{yield}}</div>
diff --git a/test/compiler/component-yield/_config.js b/test/compiler/component-yield/_config.js
new file mode 100644
index 0000000000..0b2f9bebff
--- /dev/null
+++ b/test/compiler/component-yield/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: '<main><div class="sidebar-widget">Hello Hello</div></main>',
+	test ( assert, component, target ) {
+		component.set({ a: 'World' });
+		assert.equal( component.get( 'a' ), 'World' );
+		assert.equal( target.innerHTML, '<main><div class="sidebar-widget">Hello World</div></main>' );
+	}
+};
diff --git a/test/compiler/component-yield/main.html b/test/compiler/component-yield/main.html
new file mode 100644
index 0000000000..a6b006660a
--- /dev/null
+++ b/test/compiler/component-yield/main.html
@@ -0,0 +1,16 @@
+<main>
+  <Widget>Hello {{a}}</Widget>
+</main>
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: { Widget },
+    data(){
+      return {
+        a: "Hello"
+      }
+    }
+	};
+</script>