diff --git a/src/empty/demo/index.vue b/src/empty/demo/index.vue
index 7b06eb0f4..7cbd7a2c1 100644
--- a/src/empty/demo/index.vue
+++ b/src/empty/demo/index.vue
@@ -34,32 +34,39 @@
   </demo-block>
 </template>
 
-<script>
-export default {
-  i18n: {
-    'zh-CN': {
-      error: '通用错误',
-      search: '搜索提示',
-      network: '网络错误',
-      imageType: '图片类型',
-      description: '描述文字',
-      customImage: '自定义图片',
-      bottomContent: '底部内容',
-    },
-    'en-US': {
-      error: 'Error',
-      search: 'Search',
-      network: 'Network',
-      imageType: 'Image Type',
-      description: 'Description',
-      customImage: 'Custom Image',
-      bottomContent: 'Bottom Content',
-    },
-  },
+<script lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    error: '通用错误',
+    search: '搜索提示',
+    network: '网络错误',
+    imageType: '图片类型',
+    description: '描述文字',
+    customImage: '自定义图片',
+    bottomContent: '底部内容',
+  },
+  'en-US': {
+    error: 'Error',
+    search: 'Search',
+    network: 'Network',
+    imageType: 'Image Type',
+    description: 'Description',
+    customImage: 'Custom Image',
+    bottomContent: 'Bottom Content',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const active = ref('error');
 
-  data() {
     return {
-      active: 'error',
+      t,
+      active,
     };
   },
 };