Add define

Author: SuguruOoki

components/ToDo.vue

@@ -0,0 +1,64 @@
+<template>
+<div>
+  <p>{{ state.messageTwo }}</p>
+  <div v-for="item in items" :key="item.id" class="flex">
+    <p>{{ item.title }}</p>
+    <p>{{ item.description }}</p>
+    <p>{{ item.isFinished }}</p>
+  </div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, reactive } from '@vue/composition-api'
+
+type ToDoItem = {
+  title: string
+  description: string
+  isFinished: boolean
+}
+
+export default defineComponent({
+  setup() {
+    const items = ref<ToDoItem[]>([
+      {
+        title: 'Welcome',
+        description: 'descriptionTest1',
+        isFinished: false
+      },
+      {
+        title: 'Welcome2',
+        description: 'descriptionTest2',
+        isFinished: true
+      },
+      {
+        title: 'Welcome3',
+        description: 'descriptionTest3',
+        isFinished: true
+      },
+    ])
+    const state = reactive<{ messageOne: string }>({
+      messageOne: "Hello"
+    });
+    const messageTwo = ref<string>("こんにちは");
+
+    return {
+      state,
+      messageTwo,
+      items
+    };
+  },
+})
+</script>
+<style>
+.NuxtLogo {
+  animation: 1s appear;
+  margin: auto;
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+}
+</style>

pages/index.vue

@@ -1,26 +1,8 @@
 <template>
   <div class="container">
     <div>
-      <Logo />
       <h1 class="title">nuxt-compostion-api-with-typescript</h1>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="button--green"
-        >
-          Documentation
-        </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="button--grey"
-        >
-          GitHub
-        </a>
-      </div>
+      <ToDo />
     </div>
   </div>
 </template>