chore: update deps

https://docs.docker.com/reference/build-checks/from-as-casing/

.eslintignore

@@ -1,4 +0,0 @@
-dist
-node_modules
-.output
-.nuxt

.eslintrc

@@ -1,3 +0,0 @@
-{
-  "extends": "@antfu"
-}

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+open_collective: antfu
+github: [antfu]

.github/workflows/ci.yml

@@ -0,0 +1,43 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+      - uses: pnpm/action-setup@v6
+      - uses: actions/setup-node@v7
+        with:
+          node-version: lts/*
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm run lint
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+      - uses: pnpm/action-setup@v6
+      - uses: actions/setup-node@v7
+        with:
+          node-version: lts/*
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install
+
+      - name: Typecheck
+        run: pnpm run typecheck

.gitignore

@@ -1,6 +1,9 @@
+.DS_Store
 node_modules
 *.log
 dist
 .output
 .nuxt
 .env
+.idea/
+public/assets/fonts

.npmrc

@@ -1 +0,0 @@
-shamefully-hoist=true

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "antfu.iconify",
+    "antfu.unocss",
+    "antfu.goto-alias",
+    "csstools.postcss",
+    "dbaeumer.vscode-eslint",
+    "vue.volar",
+    "antfu.pnpm-catalog-lens"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,45 @@
+{
+  "files.associations": {
+    "*.css": "postcss"
+  },
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ],
+  "interline-translate.knownPopularWordCount": 6000,
+  "iconify.annotations": true,
+  "iconify.inplace": true
+}

Dockerfile

@@ -0,0 +1,22 @@
+FROM node:20-alpine AS build-stage
+
+WORKDIR /app
+RUN corepack enable
+
+COPY .npmrc package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+RUN --mount=type=cache,id=pnpm-store,target=/root/.pnpm-store \
+    pnpm install --frozen-lockfile
+
+COPY . .
+RUN pnpm build
+
+# SSR
+FROM node:20-alpine AS production-stage
+
+WORKDIR /app
+
+COPY --from=build-stage /app/.output ./.output
+
+EXPOSE 3000
+
+CMD ["node", ".output/server/index.mjs"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,59 +1,61 @@
 <p align="center">
-<img src="https://user-images.githubusercontent.com/11247099/140462375-7b7ac4db-35b7-453c-8a05-13d8d20282c4.png" width="600"/>
+<img src="https://user-images.githubusercontent.com/11247099/140462375-7b7ac4db-35b7-453c-8a05-13d8d20282c4.png" alt="Vitesse" width="600"/>
 </p>
 
 <h2 align="center">
-<a href="https://github.com/antfu/vitesse">Vitesse</a> for Nuxt 3
+<a href="https://github.com/antfu/vitesse">Vitesse</a> for Nuxt 4
 </h2><br>
 
-<pre align="center">
-🧪 Working in Progress
-</pre>
-
 <p align="center">
 <br>
 <a href="https://vitesse-nuxt3.netlify.app/">🖥 Online Preview</a>
 <br><br>
-<a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
+<a href="https://stackblitz.com/github/antfu/vitesse-nuxt"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt="Open in StackBlitz" /></a>
 </p>
 
 ## Features
 
-- [💚 Nuxt 3](https://v3.nuxtjs.org) - SSR, ESR, File-based routing, components auto importing, modules, etc.
+- 💚 [Nuxt 4](https://nuxt.com/) - SSR, ESR, File-based routing, components auto importing, modules, etc.
 
-- ⚡️ Vite - Instant HMR
+- ⚡️ Vite - Instant HMR.
 
-- 🎨 [UnoCSS](https://github.com/antfu/unocss) - The instant on-demand atomic CSS engine.
+- 🎨 [UnoCSS](https://github.com/unocss/unocss) - The instant on-demand atomic CSS engine.
 
-- 😃 Use icons from any icon sets in Pure CSS, powered by [UnoCSS](https://github.com/antfu/unocss)
+- 😃 Use icons from any icon sets in Pure CSS, powered by [UnoCSS](https://github.com/unocss/unocss).
 
-- 🔥 The `<script setup>` syntax
+- 🔥 The `<script setup>` syntax.
 
-- 🍍 [State Management via Pinia](https://pinia.esm.dev/)
+- 🍍 [State Management via Pinia](https://github.com/vuejs/pinia), see [./app/composables/user.ts](./app/composables/user.ts).
+
+- 📑 [Layout system](./app/layouts).
 
 - 📥 APIs auto importing - for Composition API, VueUse and custom composables.
 
-- 🏎 Zero-config cloud functions and deploy
+- 🏎 Zero-config cloud functions and deploy.
 
-- 🦾 TypeScript, of course
+- 🦾 TypeScript, of course.
+
+- 📲 [PWA](https://github.com/vite-pwa/nuxt) with offline support and auto-update behavior.
 
 ## Plugins
 
 ### Nuxt Modules
 
-- [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs
-- [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine.
-- [Pinia](https://pinia.esm.dev/) - intuitive, type safe, light and flexible Store for Vue.
+- [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs.
+- [ColorMode](https://github.com/nuxt-modules/color-mode) - dark and Light mode with auto detection made easy with Nuxt.
+- [UnoCSS](https://github.com/unocss/unocss) - the instant on-demand atomic CSS engine.
+- [Pinia](https://github.com/vuejs/pinia) - intuitive, type safe, light and flexible Store for Vue.
+- [VitePWA](https://github.com/vite-pwa/nuxt) - zero-config PWA Plugin for Nuxt 4.
+- [DevTools](https://github.com/nuxt/devtools) - unleash Nuxt Developer Experience.
 
 ## IDE
 
-We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https://github.com/johnsoncodehk/volar) to get the best experience (You might want to disable Vetur if you have it).
+We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https://github.com/johnsoncodehk/volar) to get the best experience (You might want to disable [Vetur](https://vuejs.github.io/vetur/) if you have it).
 
 ## Variations
 
 - [vitesse](https://github.com/antfu/vitesse) - Opinionated Vite Starter Template
 - [vitesse-lite](https://github.com/antfu/vitesse-lite) - Lightweight version of Vitesse
-- [vitesse-nuxt3](https://github.com/antfu/vitesse-nuxt3) - Vitesse for Nuxt 3
 - [vitesse-nuxt-bridge](https://github.com/antfu/vitesse-nuxt-bridge) - Vitesse for Nuxt 2 with Bridge
 - [vitesse-webext](https://github.com/antfu/vitesse-webext) - WebExtension Vite starter template
 
@@ -61,18 +63,18 @@ We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https:
 
 ### Online
 
-<a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
+<a href="https://stackblitz.com/github/antfu/vitesse-nuxt"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
 
 ### GitHub Template
 
-[Create a repo from this template on GitHub](https://github.com/antfu/vitesse-nuxt3/generate).
+[Create a repo from this template on GitHub](https://github.com/antfu/vitesse-nuxt/generate).
 
 ### Clone to local
 
 If you prefer to do it manually with the cleaner git history
 
 ```bash
-npx degit antfu/vitesse-nuxt3 my-nuxt3-app
-cd my-nuxt3-app
+npx degit antfu/vitesse-nuxt my-nuxt-app
+cd my-nuxt-app
 pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
 ```

app.vue

@@ -1,10 +0,0 @@
-<template>
-  <main class="py-20 px-10 text-center">
-    <NuxtPage />
-    <Footer />
-  </main>
-</template>
-
-<style>
-@import '~/styles/main.css';
-</style>

app/app.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { appName } from '~/constants'
+
+useHead({
+  title: appName,
+})
+</script>
+
+<template>
+  <VitePwaManifest />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<style>
+html,
+body,
+#__nuxt {
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+html.dark {
+  color-scheme: dark;
+}
+</style>

app/components/DarkToggle.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const color = useColorMode()
+
+useHead({
+  meta: [{
+    id: 'theme-color',
+    name: 'theme-color',
+    content: () => color.value === 'dark' ? '#222222' : '#ffffff',
+  }],
+})
+
+function toggleDark() {
+  color.preference = color.value === 'dark' ? 'light' : 'dark'
+}
+</script>
+
+<template>
+  <button class="!outline-none" @click="toggleDark">
+    <div class="i-carbon-sun dark:i-carbon-moon" />
+  </button>
+</template>

app/components/Footer.vue

@@ -1,13 +1,7 @@
 <template>
-  <div
-    text="xl gray4"
-    m-5
-    flex
-    justify-center
-    gap-3
-  >
+  <div text="xl gray4" m-5 flex="~ gap3" justify-center>
     <NuxtLink i-carbon-campsite to="/" />
-    <a i-carbon-logo-github href="https://github.com/antfu/vitesse-nuxt3" target="__blank" />
+    <a i-carbon-logo-github href="https://github.com/antfu/vitesse-nuxt3" target="_blank" />
     <DarkToggle />
   </div>
 </template>

app/components/InputEntry.vue

@@ -2,7 +2,7 @@
 const name = ref('')
 
 const router = useRouter()
-const go = () => {
+function go() {
   if (name.value)
     router.push(`/hi/${encodeURIComponent(name.value)}`)
 }
@@ -15,19 +15,16 @@ const go = () => {
       v-model="name"
       placeholder="What's your name?"
       type="text"
-      autocomplete="false"
-      p="x-4 y-2"
-      m="t-5"
-      w="250px"
-      text="center"
-      bg="transparent"
+      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
-        class="m-3 text-sm btn"
+        text-sm btn m-3
         :disabled="!name"
         @click="go"
       >

app/components/Logos.vue

@@ -0,0 +1,17 @@
+<template>
+  <div text-2xl font-300 inline-flex cursor-default>
+    <div flex flex-col children:mx-auto>
+      <img h-18 w-18 inline-block src="/nuxt.svg">
+      <span text-green-400 mt--2>Nuxt 4</span>
+    </div>
+    <div
+      text="3xl gray4"
+      m="x-4 y-auto"
+      i-carbon-add transform transition-all-500 hover:rotate-135
+    />
+    <div flex flex-col children:mx-auto>
+      <img h-18 w-18 inline-block src="/vite.png">
+      <span text-purple-500 mt--2>Vitesse</span>
+    </div>
+  </div>
+</template>

app/components/PageView.vue

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

app/config/pwa.ts

@@ -0,0 +1,79 @@
+import type { ModuleOptions } from '@vite-pwa/nuxt'
+import process from 'node:process'
+import { appDescription, appName } from '../constants/index'
+
+const scope = '/'
+
+export const pwa: ModuleOptions = {
+  registerType: 'autoUpdate',
+  scope,
+  base: scope,
+  manifest: {
+    id: scope,
+    scope,
+    name: appName,
+    short_name: appName,
+    description: appDescription,
+    theme_color: '#ffffff',
+    icons: [
+      {
+        src: 'pwa-192x192.png',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+      {
+        src: 'pwa-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
+      {
+        src: 'maskable-icon.png',
+        sizes: '512x512',
+        type: 'image/png',
+        purpose: 'any maskable',
+      },
+    ],
+  },
+  workbox: {
+    globPatterns: ['**/*.{js,css,html,txt,png,ico,svg}'],
+    navigateFallbackDenylist: [/^\/api\//],
+    navigateFallback: '/',
+    cleanupOutdatedCaches: true,
+    runtimeCaching: [
+      {
+        urlPattern: /^https:\/\/fonts.googleapis.com\/.*/i,
+        handler: 'CacheFirst',
+        options: {
+          cacheName: 'google-fonts-cache',
+          expiration: {
+            maxEntries: 10,
+            maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+          },
+          cacheableResponse: {
+            statuses: [0, 200],
+          },
+        },
+      },
+      {
+        urlPattern: /^https:\/\/fonts.gstatic.com\/.*/i,
+        handler: 'CacheFirst',
+        options: {
+          cacheName: 'gstatic-fonts-cache',
+          expiration: {
+            maxEntries: 10,
+            maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+          },
+          cacheableResponse: {
+            statuses: [0, 200],
+          },
+        },
+      },
+    ],
+  },
+  registerWebManifestInRouteRules: true,
+  writePlugin: true,
+  devOptions: {
+    enabled: process.env.VITE_PLUGIN_PWA === 'true',
+    navigateFallback: scope,
+  },
+}

app/constants/index.ts

@@ -0,0 +1,2 @@
+export const appName = 'Vitesse for Nuxt 4'
+export const appDescription = 'Vitesse for Nuxt 4'

app/layouts/README.md

@@ -0,0 +1,15 @@
+## Layouts
+
+Vue components in this dir are used as layouts.
+
+By default, `default.vue` will be used unless an alternative is specified in the route meta.
+
+```vue
+<script setup lang="ts">
+definePageMeta({
+  layout: 'home',
+})
+</script>
+```
+
+Learn more on https://nuxt.com/docs/guide/directory-structure/layouts

app/layouts/default.vue

@@ -0,0 +1,9 @@
+<template>
+  <main class="px-10 py-20 text-center">
+    <slot />
+    <Footer />
+    <div class="text-sm mx-auto mt-5 text-center opacity-25">
+      [Default Layout]
+    </div>
+  </main>
+</template>

app/layouts/home.vue

@@ -0,0 +1,9 @@
+<template>
+  <main class="px-10 py-20 text-center">
+    <slot />
+    <Footer />
+    <div class="text-sm mx-auto mt-5 text-center opacity-25">
+      [Home Layout]
+    </div>
+  </main>
+</template>

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 text-sm btn m="3 t8" @click="router.back()">
+        Back
+      </button>
+    </div>
+  </main>
+</template>

app/pages/hi/[id].vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { useUserStore } from '~/stores/user'
-
-const route = useRoute()
+const route = useRoute<'hi-id'>()
 const user = useUserStore()
 const name = route.params.id
 
 watchEffect(() => {
   user.setNewName(route.params.id as string)
 })
+
+definePageMeta({
+  layout: 'home',
+})
 </script>
 
 <template>
@@ -21,7 +23,7 @@ watchEffect(() => {
     </div>
 
     <template v-if="user.otherNames.length">
-      <p text-sm my-4>
+      <div text-sm my-4>
         <span op-50>Also as known as:</span>
         <ul>
           <li v-for="otherName in user.otherNames" :key="otherName">
@@ -30,14 +32,14 @@ watchEffect(() => {
             </router-link>
           </li>
         </ul>
-      </p>
+      </div>
     </template>
 
     <Counter />
 
     <div>
       <NuxtLink
-        class="btn m-3 text-sm"
+        class="text-sm btn m-3"
         to="/"
       >
         Back

app/pages/index.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'home',
+})
+
+const online = useOnline()
+</script>
+
+<template>
+  <div>
+    <Logos mb-6 />
+    <ClientOnly>
+      <Suspense>
+        <PageView v-if="online" />
+        <div v-else text-gray:80>
+          You're offline
+        </div>
+        <template #fallback>
+          <div op50 italic>
+            <span animate-pulse>Loading...</span>
+          </div>
+        </template>
+      </Suspense>
+      <template #fallback>
+        <div op50>
+          <span animate-pulse>...</span>
+        </div>
+      </template>
+    </ClientOnly>
+    <InputEntry />
+  </div>
+</template>

components/DarkToggle.vue

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

components/Logos.vue

@@ -1,20 +0,0 @@
-<template>
-  <div inline-flex text-2xl font-300 cursor-default>
-    <div flex flex-col children:mx-auto>
-      <img w-18 h-18 inline-block src="/nuxt.png">
-      <span text-green5 mt--2>Nuxt 3</span>
-    </div>
-    <div
-      text="3xl gray4"
-      m="x-4 y-auto"
-      transition-all-500
-      transform
-      hover:rotate-135
-      i-carbon-add
-    />
-    <div flex flex-col children:mx-auto>
-      <img w-18 h-18 inline-block src="/vite.png">
-      <span text-purple5 mt--2>Vitesse</span>
-    </div>
-  </div>
-</template>

eslint.config.js

@@ -0,0 +1,12 @@
+// @ts-check
+import antfu from '@antfu/eslint-config'
+import nuxt from './.nuxt/eslint.config.mjs'
+
+export default antfu(
+  {
+    unocss: true,
+    formatters: true,
+    pnpm: true,
+  },
+)
+  .append(nuxt())

netlify.toml

@@ -1,12 +1,11 @@
-[build.environment]
-  NPM_FLAGS = "--version"
-  NODE_VERSION = "16"
-
 [build]
-  publish = "dist"
-  command = "npx pnpm i --store=node_modules/.pnpm-store && npx pnpm run build"
+publish = "dist"
+command = "pnpm run build"
+
+[build.environment]
+NODE_VERSION = "20"
 
 [[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200
+from = "/*"
+to = "/index.html"
+status = 200

nuxt.config.ts

@@ -1,34 +1,77 @@
-import { defineNuxtConfig } from 'nuxt3'
+import { pwa } from './app/config/pwa'
+import { appDescription } from './app/constants/index'
 
 export default defineNuxtConfig({
-  meta: {
-    title: 'Vitesse Nuxt 3',
-    link: [
-      {
-        rel: 'icon', type: 'image/png', href: '/nuxt.png',
-      },
-    ],
-  },
-  buildModules: [
+  modules: [
     '@vueuse/nuxt',
     '@unocss/nuxt',
     '@pinia/nuxt',
+    '@nuxtjs/color-mode',
+    '@vite-pwa/nuxt',
+    '@nuxt/eslint',
   ],
-  vueuse: {
-    ssrHandlers: true,
+
+  devtools: {
+    enabled: true,
   },
-  unocss: {
-    uno: true,
-    attributify: true,
-    preflight: true,
-    icons: {
-      scale: 1.2,
+
+  app: {
+    head: {
+      viewport: 'width=device-width,initial-scale=1',
+      link: [
+        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
+        { rel: 'icon', type: 'image/svg+xml', href: '/nuxt.svg' },
+        { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
+      ],
+      meta: [
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'description', content: appDescription },
+        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
+        { name: 'theme-color', media: '(prefers-color-scheme: light)', content: 'white' },
+        { name: 'theme-color', media: '(prefers-color-scheme: dark)', content: '#222222' },
+      ],
     },
-    shortcuts: [
-      ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
-    ],
   },
-  // experimental: {
-  //   viteNode: true,
-  // },
+
+  colorMode: {
+    classSuffix: '',
+  },
+
+  future: {
+    compatibilityVersion: 4,
+  },
+
+  experimental: {
+    // when using generate, payload js assets included in sw precache manifest
+    // but missing on offline, disabling extraction it until fixed
+    payloadExtraction: false,
+    renderJsonPayloads: true,
+    typedPages: true,
+  },
+
+  compatibilityDate: '2024-08-14',
+
+  nitro: {
+    esbuild: {
+      options: {
+        target: 'esnext',
+      },
+    },
+    prerender: {
+      crawlLinks: false,
+      routes: ['/'],
+      ignore: ['/hi'],
+    },
+  },
+
+  eslint: {
+    config: {
+      standalone: false,
+      nuxt: {
+        sortConfigKeys: true,
+      },
+    },
+  },
+
+  pwa,
 })

package.json

@@ -1,29 +1,40 @@
 {
+  "type": "module",
   "private": true,
+  "packageManager": "pnpm@11.22.0",
   "scripts": {
-    "build": "nuxi build",
-    "dev": "nuxi dev",
+    "build": "nuxt build",
+    "dev:pwa": "VITE_PLUGIN_PWA=true nuxt dev",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "prepare": "nuxt prepare",
+    "preview": "nuxt preview",
     "start": "node .output/server/index.mjs",
-    "lint": "eslint ."
-  },
-  "dependencies": {
-    "pinia": "^2.0.12"
+    "start:generate": "npx serve .output/public",
+    "lint": "eslint .",
+    "typecheck": "nuxt typecheck"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.19.1",
-    "@iconify-json/carbon": "^1.1.2",
-    "@iconify-json/twemoji": "^1.1.2",
-    "@pinia/nuxt": "^0.1.8",
-    "@unocss/nuxt": "^0.30.8",
-    "@vueuse/nuxt": "^8.2.3",
-    "eslint": "^8.12.0",
-    "nuxt3": "^3.0.0-27478938.fdd6a91",
-    "typescript": "^4.6.3"
-  },
-  "pnpm": {
-    "overrides": {
-      "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
-      "@nuxt/kit-edge": "latest"
-    }
+    "@antfu/eslint-config": "catalog:dev",
+    "@iconify-json/carbon": "catalog:icons",
+    "@iconify-json/twemoji": "catalog:icons",
+    "@nuxt/devtools": "catalog:build",
+    "@nuxt/eslint": "catalog:build",
+    "@nuxtjs/color-mode": "catalog:build",
+    "@pinia/nuxt": "catalog:build",
+    "@types/node": "catalog:dev",
+    "@unocss/eslint-config": "catalog:build",
+    "@unocss/nuxt": "catalog:build",
+    "@vite-pwa/nuxt": "catalog:build",
+    "@vueuse/core": "catalog:frontend",
+    "@vueuse/nuxt": "catalog:build",
+    "eslint": "catalog:dev",
+    "eslint-plugin-format": "catalog:dev",
+    "nuxt": "catalog:build",
+    "pinia": "catalog:frontend",
+    "typescript": "catalog:dev",
+    "unocss": "catalog:build",
+    "vue": "catalog:frontend",
+    "vue-tsc": "catalog:dev"
   }
 }

pages/index.vue

@@ -1,14 +0,0 @@
-<template>
-  <div>
-    <Logos mb-6 />
-    <Suspense>
-      <PageView />
-      <template #fallback>
-        <div op50 italic>
-          <span animate-pulse>Loading...</span>
-        </div>
-      </template>
-    </Suspense>
-    <InputEntry />
-  </div>
-</template>

pnpm-workspace.yaml

@@ -0,0 +1,57 @@
+minimumReleaseAge: 0
+shamefullyHoist: true
+shellEmulator: true
+strictPeerDependencies: false
+autoInstallPeers: false
+trustPolicy: no-downgrade
+
+packages: []
+overrides:
+  '@nuxt/devtools': 'catalog:build'
+  '@nuxt/kit': 'catalog:build'
+  chokidar: 'catalog:build'
+  nuxt: 'catalog:build'
+  rollup: 4.62.5
+  semver: 'catalog:build'
+  unplugin: 'catalog:build'
+  vite: 'catalog:build'
+  workbox-build: 7.4.0
+catalogs:
+  build:
+    '@nuxt/devtools': ^3.4.1
+    '@nuxt/eslint': ^1.17.0
+    '@nuxt/kit': ^4.5.2
+    '@nuxtjs/color-mode': ^4.0.1
+    '@pinia/nuxt': ^1.0.2
+    '@unocss/eslint-config': ^66.8.1
+    '@unocss/nuxt': ^66.8.1
+    '@vite-pwa/nuxt': ^1.1.1
+    '@vueuse/nuxt': ^14.4.0
+    chokidar: ^5.0.0
+    nuxt: ^4.5.2
+    semver: ^7.8.5
+    unocss: ^66.8.1
+    unplugin: ^3.3.0
+    vite: ^8.2.2
+  dev:
+    '@antfu/eslint-config': ^9.3.0
+    '@types/node': ^26.2.0
+    eslint: ^10.9.0
+    eslint-plugin-format: ^2.0.1
+    typescript: ^6.0.3
+    vue-tsc: ^3.3.11
+  frontend:
+    '@vueuse/core': ^14.4.0
+    pinia: ^4.0.3
+    vue: ^3.5.41
+  icons:
+    '@iconify-json/carbon': ^1.2.25
+    '@iconify-json/twemoji': ^1.2.5
+
+update:
+  ignoreDeps:
+    - typescript@7
+
+allowBuilds:
+  esbuild: true
+  unrs-resolver: true

public/nuxt.svg

@@ -0,0 +1,3 @@
+<svg width="900" height="900" viewBox="0 0 900 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M504.908 750H839.476C850.103 750.001 860.542 747.229 869.745 741.963C878.948 736.696 886.589 729.121 891.9 719.999C897.211 710.876 900.005 700.529 900 689.997C899.995 679.465 897.193 669.12 891.873 660.002L667.187 274.289C661.876 265.169 654.237 257.595 645.036 252.329C635.835 247.064 625.398 244.291 614.773 244.291C604.149 244.291 593.711 247.064 584.511 252.329C575.31 257.595 567.67 265.169 562.36 274.289L504.908 372.979L392.581 179.993C387.266 170.874 379.623 163.301 370.42 158.036C361.216 152.772 350.777 150 340.151 150C329.525 150 319.086 152.772 309.883 158.036C300.679 163.301 293.036 170.874 287.721 179.993L8.12649 660.002C2.80743 669.12 0.00462935 679.465 5.72978e-06 689.997C-0.00461789 700.529 2.78909 710.876 8.10015 719.999C13.4112 729.121 21.0523 736.696 30.255 741.963C39.4576 747.229 49.8973 750.001 60.524 750H270.538C353.748 750 415.112 713.775 457.336 643.101L559.849 467.145L614.757 372.979L779.547 655.834H559.849L504.908 750ZM267.114 655.737L120.551 655.704L340.249 278.586L449.87 467.145L376.474 593.175C348.433 639.03 316.577 655.737 267.114 655.737Z" fill="#00DC82"/>
+</svg>

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

server/api/pageview.ts

@@ -1,7 +1,7 @@
 const startAt = Date.now()
 let count = 0
 
-export default () => ({
+export default defineEventHandler(() => ({
   pageview: count++,
   startAt,
-})
+}))

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

styles/main.css

@@ -1,12 +0,0 @@
-html,
-body,
-#app {
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-}
-
-html.dark {
-  background: #222;
-  color: white;
-}

tsconfig.json

@@ -1,3 +1,9 @@
 {
-  "extends": "./.nuxt/tsconfig.json"
+  "references": [
+    { "path": "./.nuxt/tsconfig.app.json" },
+    { "path": "./.nuxt/tsconfig.server.json" },
+    { "path": "./.nuxt/tsconfig.shared.json" },
+    { "path": "./.nuxt/tsconfig.node.json" }
+  ],
+  "files": []
 }

uno.config.ts

@@ -0,0 +1,38 @@
+import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetWebFonts,
+  presetWind4,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+export default defineConfig({
+  shortcuts: [
+    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+    ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
+  ],
+  presets: [
+    presetWind4(),
+    presetAttributify(),
+    presetIcons({
+      scale: 1.2,
+    }),
+    presetTypography(),
+    presetWebFonts({
+      fonts: {
+        sans: 'DM Sans',
+        serif: 'DM Serif Display',
+        mono: 'DM Mono',
+      },
+      processors: createLocalFontProcessor(),
+    }),
+  ],
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+})