diff --git a/lib/matestack/ui/vue_js/components/async.js b/lib/matestack/ui/vue_js/components/async.js
index 22927b65..756f6d07 100644
--- a/lib/matestack/ui/vue_js/components/async.js
+++ b/lib/matestack/ui/vue_js/components/async.js
@@ -39,6 +39,11 @@ const componentDef = {
     hide: function(){
       this.showing = false
       this.event.data = {}
+      if(this.props["hide_after"] != undefined) {
+        this.hideAfterTimeout = setTimeout(function () {
+          this.hide()
+        }, parseInt(this.props["hide_after"]));
+      }
     },
     startDefer: function(){
       const self = this
@@ -107,4 +112,4 @@ const componentDef = {
 
 let component = Vue.component('matestack-ui-core-async', componentDef)
 
-export default componentDef
+export default componentDef
\ No newline at end of file
diff --git a/lib/matestack/ui/vue_js/components/toggle.js b/lib/matestack/ui/vue_js/components/toggle.js
index 4b7c37ec..1015c305 100644
--- a/lib/matestack/ui/vue_js/components/toggle.js
+++ b/lib/matestack/ui/vue_js/components/toggle.js
@@ -7,7 +7,7 @@ const componentDef = {
   data: function(){
     return {
       showing: true,
-      hide_after_timeout: null,
+      hideAfterTimeout: null,
       event: {
         data: {}
       }
@@ -34,6 +34,11 @@ const componentDef = {
   },
   created: function () {
     const self = this
+    if(this.props["hide_after"] != undefined){
+      self.hideAfterTimeout = setTimeout(function () {
+        self.hide()
+      }, parseInt(this.props["hide_after"]));
+    }
     if(this.props["show_on"] != undefined){
       this.showing = false
       var show_events = this.props["show_on"].split(",")
diff --git a/spec/dummy/app/matestack/demo/components/header.rb b/spec/dummy/app/matestack/demo/components/header.rb
index 9436889d..5cf2381e 100644
--- a/spec/dummy/app/matestack/demo/components/header.rb
+++ b/spec/dummy/app/matestack/demo/components/header.rb
@@ -3,14 +3,9 @@ class Demo::Components::Header < ApplicationComponent
   optional :user
 
   def response
-    h1 'This is a header'
-    [1,2].each do |number|
-      slot :first, number
-    end
-    slot :user
-    toggle show_on: 'show', hide_on: 'hide' do
+    toggle hide_after: 3000 do
       div do
-        h2 ctx.user
+        h2 'THIS SHOULD HIDE AFTER 3 SECONDS'
       end
     end
     isolate_test rerender_on: 'isolate', public_options: { foo: :bar }