fix: update nuxt 4

app/app.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+useHead({
+  title: 'starter nuxt',
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/svg+xml',
+      href: '/favicon.svg',
+    },
+  ],
+})
+</script>
+
+<template>
+  <NuxtLayout>
+    <main font-sans p="x-4 y-10" text="center gray-700 dark:gray-200">
+      <NuxtPage />
+      <LazyFooter />
+    </main>
+  </NuxtLayout>
+</template>
+
+<style>
+html, body , #__nuxt{
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+html.dark {
+  background: #222222;
+  color: #ffffff;
+}
+</style>

app/components/counter/Counter.vue

@@ -0,0 +1,17 @@
+<script setup lang='ts'>
+const { count, inc, dec } = useCount()
+</script>
+
+<template>
+  <div inline-flex m="y-3">
+    <button btn p-2 rounded-full @click="dec()">
+      <div i-carbon-subtract />
+    </button>
+    <div font="mono" w="15" m-auto inline-block>
+      {{ count }}
+    </div>
+    <button btn p-2 rounded-full @click="inc()">
+      <div i-carbon-add />
+    </button>
+  </div>
+</template>

app/components/footer/Footer.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    text="xl gray4"
+    m-5
+    flex
+    justify-center
+    gap-3
+  >
+    <NuxtLink i-carbon-home to="/" />
+    <a i-carbon-logo-github href="https://github.com/elonehoo/starter-nuxt" target="_blank" />
+    <LazyToggleDarkToggle />
+  </div>
+</template>

app/components/input/InputEntry.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const name = ref('')
+
+const router = useRouter()
+function go() {
+  if (name.value)
+    router.push(`/hi/${encodeURIComponent(name.value)}`)
+}
+</script>
+
+<template>
+  <div>
+    <input
+      id="input"
+      v-model="name"
+      placeholder="What's your name?"
+      type="text" autocomplete="off"
+      p="x-4 y-2" m="t-5" w="250px"
+      text="center" bg="transparent"
+      border="~ rounded gray-200 dark:gray-700"
+      outline="none active:none"
+      @keydown.enter="go"
+    >
+    <div>
+      <button
+        m-3 text-sm btn
+        :disabled="!name"
+        @click="go"
+      >
+        GO
+      </button>
+    </div>
+  </div>
+</template>

app/components/toggle/DarkToggle.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const color = useColorMode()
+
+function toggleDark() {
+  color.preference = color.value === 'dark' ? 'light' : 'dark'
+}
+</script>
+
+<template>
+  <button class="!outline-none" @click="toggleDark">
+    <div class="dark:i-carbon-moon i-carbon-sun" />
+  </button>
+</template>

app/components/views/PageView.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const { data } = await useFetch('/api/pageview')
+
+const time = useTimeAgo(computed(() => data.value!.startAt))
+</script>
+
+<template>
+  <div text-gray:80>
+    <span font-500 text-gray>{{ data!.pageview }}</span>
+    page views since
+    <span text-gray>{{ time }}</span>
+  </div>
+</template>

app/composables/count.ts

@@ -0,0 +1,16 @@
+export function useCount() {
+  const count = useState('count', () => Math.round(Math.random() * 20))
+
+  function inc() {
+    count.value += 1
+  }
+  function dec() {
+    count.value -= 1
+  }
+
+  return {
+    count,
+    inc,
+    dec,
+  }
+}

app/composables/user.ts

@@ -0,0 +1,34 @@
+import { acceptHMRUpdate, defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', () => {
+  /**
+   * Current named of the user.
+   */
+  const savedName = ref('')
+  const previousNames = ref(new Set<string>())
+
+  const usedNames = computed(() => Array.from(previousNames.value))
+  const otherNames = computed(() => usedNames.value.filter(name => name !== savedName.value))
+
+  /**
+   * Changes the current name of the user and saves the one that was used
+   * before.
+   *
+   * @param name - new name to set
+   */
+  function setNewName(name: string) {
+    if (savedName.value)
+      previousNames.value.add(savedName.value)
+
+    savedName.value = name
+  }
+
+  return {
+    setNewName,
+    otherNames,
+    savedName,
+  }
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))

app/pages/[...all].vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const router = useRouter()
+</script>
+
+<template>
+  <main p="x4 y10" text="center teal-700 dark:gray-200">
+    <div text-4xl>
+      <div i-carbon-warning inline-block />
+    </div>
+    <div>Not found</div>
+    <div>
+      <button btn text-sm m="3 t8" @click="router.back()">
+        Back
+      </button>
+    </div>
+  </main>
+</template>

app/pages/hi/[name].vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const route = useRoute()
+const user = useUserStore()
+const name = route.params.name
+
+watchEffect(() => {
+  user.setNewName(route.params.name as string)
+})
+
+definePageMeta({
+  layout: 'home',
+})
+</script>
+
+<template>
+  <div>
+    <div i-carbon-piggy-bank text-4xl inline-block />
+    <p>
+      Hi, {{ name }}
+    </p>
+
+    <template v-if="user.otherNames.length">
+      <p text-sm my-4>
+        <span op-50>Also as known as:</span>
+        <ul>
+          <li v-for="otherName in user.otherNames" :key="otherName">
+            <router-link :to="`/hi/${otherName}`" replace>
+              {{ otherName }}
+            </router-link>
+          </li>
+        </ul>
+      </p>
+    </template>
+
+    <LazyCounter />
+
+    <div>
+      <NuxtLink
+        class="btn m-3 text-sm"
+        to="/"
+      >
+        Back
+      </NuxtLink>
+    </div>
+  </div>
+</template>

app/pages/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <div i-carbon-piggy-bank-slot text-4xl inline-block />
+    <Suspense>
+      <LazyViewsPageView />
+      <template #fallback>
+        <div op50 italic>
+          <span animate-pulse>Loading...</span>
+        </div>
+      </template>
+    </Suspense>
+    <LazyInputEntry />
+  </div>
+</template>