chore: check database nuxt works well

Author: posva

packages/nuxt/playground/components/TodoItem.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { computed, nextTick, ref } from 'vue'
+
+export interface Todo {
+  created: Date
+  finished: boolean
+  text: string
+}
+
+const props = defineProps<{
+  todo: Todo & { id: string }
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:todo', id: string, newTodo: Todo): void
+  (event: 'delete', id: string): void
+}>()
+
+const isEditing = ref(false)
+const textCopy = ref('')
+
+function startEdit() {
+  textCopy.value = props.todo.text
+  isEditing.value = true
+}
+
+function saveTodo() {
+  if (!isEditing.value) { return }
+
+  emit('update:todo', props.todo.id, {
+    ...props.todo,
+    text: textCopy.value,
+  })
+
+  isEditing.value = false
+}
+
+const finished = computed({
+  get: () => props.todo.finished,
+  set(finished) {
+    emit('update:todo', props.todo.id, { ...props.todo, finished })
+  },
+})
+
+async function lostFocus() {
+  await nextTick()
+  saveTodo()
+}
+</script>
+
+<template>
+  <li>
+    <form v-if="isEditing" @submit.prevent="saveTodo">
+      <input
+        v-model="textCopy"
+        v-focus
+        type="text"
+        @keydown.esc="isEditing = false"
+        @blur="lostFocus"
+      >
+      <button>Save</button>
+      <button type="button" @click="isEditing = false">
+        Cancel
+      </button>
+    </form>
+    <template v-else>
+      <input v-model="finished" type="checkbox">
+      <span
+        :class="todo.finished ? 'line-through' : ''"
+        @dblclick="startEdit"
+      >{{ todo.text }}</span>
+    </template>
+    <button @click="$emit('delete', todo.id)">
+      Delete
+    </button>
+  </li>
+</template>

packages/nuxt/playground/pages/database/todos.vue

@@ -1,16 +1,68 @@
 <script setup lang="ts">
-const todos = ref<{ title: string, id: string }[]>([])
+
+import {
+  push,
+  remove,
+  ref as dbRef,
+  serverTimestamp,
+  update,
+} from 'firebase/database'
+import { ref } from 'vue'
+import { useDatabase, useList } from 'vuefire'
+import { Todo } from '~/components/TodoItem.vue'
+
+const db = useDatabase()
+const todosRef = dbRef(db, 'todos')
+// TODO:
+// const finishedTodos = query(todosRef, where('finished', '==', true))
+// const unfinishedTodos = query(todosRef, where('finished', '==', false))
+
+const todos = useList<Todo>(todosRef)
+
+const newTodoText = ref('')
+
+function addTodo() {
+  if (newTodoText.value) {
+    push(todosRef, {
+      text: newTodoText.value,
+      finished: false,
+      created: serverTimestamp(),
+    })
+    newTodoText.value = ''
+  }
+}
+
+function updateTodo(id: string, newTodo: Todo) {
+  update(dbRef(db, 'todos/' + id), newTodo)
+}
+
+function removeTodo(id: string) {
+  remove(dbRef(db, 'todos/' + id))
+}
+
+function toggleTodos() {
+  // TODO:
+}
+
 </script>
 
 <template>
   <div>
-    <h1>Todos</h1>
+    <button @click="toggleTodos">
+      Toggle todos
+    </button> <br>
+    <form @submit.prevent="addTodo">
+      <input v-model.trim="newTodoText" placeholder="Add new todo">
+      <button>Add Todo</button>
+    </form>
     <ul>
-      <li v-for="todo in todos" :key="todo.id">
-        <NuxtLink :to="`/database/todos/${todo.id}`">
-          {{ todo.title }}
-        </NuxtLink>
-      </li>
+      <TodoItem
+        v-for="todo in todos"
+        :key="todo.id"
+        :todo="todo"
+        @delete="removeTodo"
+        @update:todo="updateTodo"
+      />
     </ul>
   </div>
 </template>

packages/nuxt/playground/plugins/focus.ts

@@ -0,0 +1,8 @@
+export default defineNuxtPlugin((nuxt) => {
+  nuxt.vueApp.directive('focus', {
+    async mounted(el) {
+      await nextTick()
+      el.focus()
+    },
+  })
+})