diff --git a/packages/toast/Toast.js b/packages/toast/Toast.js
new file mode 100644
index 000000000..89c049613
--- /dev/null
+++ b/packages/toast/Toast.js
@@ -0,0 +1,98 @@
+import { use, isDef } from '../utils';
+import Icon from '../icon';
+import Loading from '../loading';
+import Popup from '../mixins/popup';
+
+const [sfc, bem] = use('toast');
+const STYLE = ['success', 'fail', 'loading'];
+
+export default sfc({
+  mixins: [Popup],
+
+  props: {
+    forbidClick: Boolean,
+    message: [String, Number],
+    type: {
+      type: String,
+      default: 'text'
+    },
+    loadingType: {
+      type: String,
+      default: 'circular'
+    },
+    position: {
+      type: String,
+      default: 'middle'
+    },
+    lockScroll: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      clickable: false
+    };
+  },
+
+  mounted() {
+    this.toggleClickale();
+  },
+
+  destroyed() {
+    this.toggleClickale();
+  },
+
+  watch: {
+    value() {
+      this.toggleClickale();
+    },
+
+    forbidClick() {
+      this.toggleClickale();
+    }
+  },
+
+  methods: {
+    toggleClickale() {
+      const clickable = this.value && this.forbidClick;
+      if (this.clickable !== clickable) {
+        this.clickable = clickable;
+        const action = clickable ? 'add' : 'remove';
+        document.body.classList[action]('van-toast--unclickable');
+      }
+    }
+  },
+
+  render(h) {
+    const { type, message } = this;
+    const style = STYLE.indexOf(type) !== -1 ? 'default' : type;
+
+    const Content = () => {
+      switch (style) {
+        case 'text':
+          return <div>{message}</div>;
+        case 'html':
+          return <div domPropsInnerHTML={message} />;
+        default:
+          return [
+            type === 'loading' ? (
+              <Loading color="white" type={this.loadingType} />
+            ) : (
+              <Icon class={bem('icon')} name={type} />
+            ),
+            isDef(message) && <div class={bem('text')}>{message}</div>
+          ];
+      }
+    };
+
+    return (
+      <transition name="van-fade">
+        <div v-show={this.value} class={bem([style, this.position])}>
+          {Content()}
+        </div>
+      </transition>
+    );
+  }
+});
diff --git a/packages/toast/Toast.vue b/packages/toast/Toast.vue
deleted file mode 100644
index 3394b01e6..000000000
--- a/packages/toast/Toast.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-  <transition name="van-fade">
-    <div
-      v-show="value"
-      :class="b([style, position])"
-    >
-      <!-- text only -->
-      <div
-        v-if="style === 'text'"
-        v-text="message"
-      />
-
-      <!-- html only -->
-      <div
-        v-if="style === 'html'"
-        v-html="message"
-      />
-
-      <!-- with icon -->
-      <template v-if="style === 'default'">
-        <loading
-          v-if="type === 'loading'"
-          color="white"
-          :type="loadingType"
-        />
-        <icon
-          v-else
-          :class="b('icon')"
-          :name="type"
-        />
-        <div
-          v-if="isDef(message)"
-          v-text="message"
-          :class="b('text')"
-        />
-      </template>
-    </div>
-  </transition>
-</template>
-
-<script>
-import create from '../utils/create';
-import Popup from '../mixins/popup';
-
-const STYLE_LIST = ['success', 'fail', 'loading'];
-
-export default create({
-  name: 'toast',
-
-  mixins: [Popup],
-
-  props: {
-    forbidClick: Boolean,
-    message: [String, Number],
-    type: {
-      type: String,
-      default: 'text'
-    },
-    loadingType: {
-      type: String,
-      default: 'circular'
-    },
-    position: {
-      type: String,
-      default: 'middle'
-    },
-    lockScroll: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  data() {
-    return {
-      clickable: false
-    };
-  },
-
-  computed: {
-    style() {
-      return STYLE_LIST.indexOf(this.type) !== -1 ? 'default' : this.type;
-    }
-  },
-
-  mounted() {
-    this.toggleClickale();
-  },
-
-  destroyed() {
-    this.toggleClickale();
-  },
-
-  watch: {
-    value() {
-      this.toggleClickale();
-    },
-
-    forbidClick() {
-      this.toggleClickale();
-    }
-  },
-
-  methods: {
-    toggleClickale() {
-      const clickable = this.value && this.forbidClick;
-      if (this.clickable !== clickable) {
-        this.clickable = clickable;
-        const action = clickable ? 'add' : 'remove';
-        document.body.classList[action]('van-toast--unclickable');
-      }
-    }
-  }
-});
-</script>
diff --git a/packages/toast/test/__snapshots__/index.spec.js.snap b/packages/toast/test/__snapshots__/index.spec.js.snap
index 68c72910e..9e8e33d85 100644
--- a/packages/toast/test/__snapshots__/index.spec.js.snap
+++ b/packages/toast/test/__snapshots__/index.spec.js.snap
@@ -3,7 +3,5 @@
 exports[`create a forbidClick toast 1`] = `
 <div class="van-toast van-toast--text van-toast--middle" style="display: none;" name="van-fade">
   <div></div>
-  <!---->
-  <!---->
 </div>
 `;