diff --git a/src/pages/index-page.vue b/src/pages/index-page.vue
index 9117c56..87aba5b 100644
--- a/src/pages/index-page.vue
+++ b/src/pages/index-page.vue
@@ -1,4 +1,6 @@
-<script lang="ts" setup>
+<script lang="tsx" setup>
+import type { FunctionalComponent } from 'vue';
+
 useHead({
   // Titles
   title: 'Hello World',
@@ -13,6 +15,14 @@ useHead({
 definePage({
   alias: '/',
 });
+
+// https://cn.vuejs.org/guide/extras/render-function#typing-functional-components
+const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
+  <>
+    <div>This is a functional component with prop: {props.prop}</div>
+    <div>{props.prop}</div>
+  </>
+);
 </script>
 
 <template>
@@ -24,4 +34,5 @@ definePage({
     <li><router-link :to="{ name: '中文页面' }">中文-页面.page.vue</router-link></li>
     <li><router-link :to="{ name: 'MdPage' }">Markdown Page</router-link></li>
   </ul>
+  <FComponent prop="Hello World" />
 </template>