wip

Author: Akryum

docs/.vitepress/tutorial/nuxt/+assets/base/app/pages/index.vue

@@ -37,41 +37,51 @@ async function removeTodo(id: string) {
 </script>
 
 <template>
-  <main class="tutorial-app">
+  <main class="tutorial-app app-shell">
     <header class="hero">
-      <h1>Nuxt rstore tutorial</h1>
-      <p>Use the Nuxt module conventions while keeping the same local-first rstore data flow.</p>
+      <h1>Tasks</h1>
     </header>
 
     <section class="surface">
       <div class="form-row">
         <input
           v-model="inputText"
-          placeholder="Ship the Nuxt tutorial"
+          placeholder="Add a task"
           @keydown.enter.prevent="addTodo(inputText)"
         >
 
         <button @click="addTodo(inputText)">
-          Add todo
+          Add
         </button>
       </div>
     </section>
 
     <section class="surface">
-      <ul class="todo-list">
+      <div v-if="!todos.length" class="empty-state">
+        No tasks yet.
+      </div>
+
+      <ul v-else class="todo-list">
         <li
           v-for="todo in todos"
           :key="todo.id"
           class="todo-item"
           :class="{ done: todo.completed }"
         >
-          <strong>{{ todo.text }}</strong>
+          <label class="todo-toggle">
+            <input
+              class="todo-checkbox"
+              type="checkbox"
+              :checked="todo.completed"
+              @change="toggleTodo(todo.id)"
+            >
 
-          <div class="todo-actions">
-            <button class="secondary" @click="toggleTodo(todo.id)">
-              {{ todo.completed ? 'Mark open' : 'Complete' }}
-            </button>
+            <div class="todo-copy">
+              <strong>{{ todo.text }}</strong>
+            </div>
+          </label>
 
+          <div class="todo-actions">
             <button class="ghost" @click="removeTodo(todo.id)">
               Delete
             </button>

docs/.vitepress/tutorial/nuxt/+assets/base/app/rstore/todos.ts

@@ -1,5 +1,5 @@
-import { z } from 'zod'
 import type { Todo } from './types'
+import { z } from 'zod'
 
 export default RStoreSchema.withItemType<Todo>().defineCollection({
   name: 'Todo',

docs/.vitepress/tutorial/nuxt/+assets/base/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rstore-interactive-tutorial",
-  "private": true,
   "type": "module",
+  "private": true,
   "scripts": {
     "dev": "nuxt dev --host 0.0.0.0 --port 3000"
   },
@@ -14,8 +14,8 @@
   "devDependencies": {
     "@vue/language-server": "3.2.5",
     "@vue/typescript-plugin": "3.2.5",
-    "typescript-language-server": "5.1.3",
     "typescript": "5.9.3",
+    "typescript-language-server": "5.1.3",
     "ws": "8.19.0"
   }
 }

docs/.vitepress/tutorial/nuxt/+assets/base/scripts/vue-language-server.mjs

@@ -1,5 +1,6 @@
 import { createRequire } from 'node:module'
 import { dirname } from 'node:path'
+import process from 'node:process'
 
 const require = createRequire(import.meta.url)
 const { createParsedCommandLine, createParsedCommandLineByJson, createVueLanguagePlugin } = requireFrom('@vue/language-core', ['@vue/language-server'])

docs/.vitepress/tutorial/nuxt/+assets/base/src/main.ts

@@ -11,6 +11,7 @@ function updateRuntimeBanner(state: 'booting' | 'ready' | 'error', title: string
   if (!banner)
     return
 
+  banner.hidden = state === 'ready'
   banner.dataset.state = state
   banner.querySelector<HTMLElement>('[data-role="title"]')!.textContent = title
   banner.querySelector<HTMLElement>('[data-role="detail"]')!.textContent = detail