initial-commit

pages/todo/+Page.vue

@@ -0,0 +1,10 @@
+<template>
+    <div>
+        <h1>To-do List</h1>
+        <TodoList />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import TodoList from './TodoList.vue'
+</script>

pages/todo/+data.ts

@@ -0,0 +1,15 @@
+// https://vike.dev/data
+
+import type { PageContextServer } from 'vike/types'
+
+export type Data = Awaited<ReturnType<typeof data>>
+
+export async function data(_pageContext: PageContextServer) {
+    // NOTE: This +data hook is only for demonstration — it doesn't actually retrieve data from a database.
+    // Go to https://vike.dev/new and select a database to scaffold an app with a persisted to-do list.
+    const todoItemsInitial = [
+        { text: 'Buy milk' },
+        { text: 'Buy strawberries' },
+    ]
+    return { todoItemsInitial }
+}

pages/todo/TodoList.vue

@@ -0,0 +1,30 @@
+<template>
+    <ul>
+        <li v-for="(item, index) in todoItems" :key="index">
+            {{ item.text }}
+        </li>
+        <li>
+            <form @submit.prevent="submitNewTodo()">
+                <input v-model="newTodo" type="text" />
+
+                <button type="submit">Add to-do</button>
+            </form>
+        </li>
+    </ul>
+</template>
+
+<script lang="ts" setup>
+import type { Data } from './+data'
+import { useData } from 'vike-vue/useData'
+import { ref } from 'vue'
+
+const { todoItemsInitial } = useData<Data>()
+const todoItems = ref<{ text: string }[]>(todoItemsInitial)
+const newTodo = ref('')
+
+const submitNewTodo = async () => {
+    const text = newTodo.value
+    todoItems.value.push({ text })
+    newTodo.value = ''
+}
+</script>