feat: add 404 error page

Author: cwandev

layouts/404.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const router = useRouter()
+
+function onBack() {
+  if (window.history.state.back)
+    history.back()
+  else
+    router.replace('/')
+}
+</script>
+
+<template>
+  <main text="center gray-300 dark:gray-200 18" py="20">
+    <van-icon name="warn-o" size="3em" />
+    <slot />
+
+    <div class="mt-10">
+      <button van-haptics-feedback btn m="3 t8" @click="onBack">
+        Back
+      </button>
+    </div>
+  </main>
+</template>

nuxt.config.ts

@@ -50,6 +50,11 @@ export default defineNuxtConfig({
 
   typescript: { shim: false },
 
+  features: {
+    // For UnoCSS
+    inlineStyles: false,
+  },
+
   eslint: {
     config: {
       standalone: false,

package.json

@@ -2,7 +2,7 @@
   "name": "nuxt3-vant-mobile",
   "type": "module",
   "private": true,
-  "packageManager": "pnpm@8.15.6",
+  "packageManager": "pnpm@8.15.7",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -39,7 +39,7 @@
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged",
-    "commit-msg": "pnpm commitlint \\${1}"
+    "commit-msg": "pnpm commitlint $1"
   },
   "lint-staged": {
     "*": "eslint --fix"

pages/[...all].vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: '404',
+})
+</script>
+
+<template>
+  <div> Not found </div>
+</template>

pages/index.vue

@@ -4,11 +4,10 @@ definePageMeta({
 })
 
 const menuItems = [
-  { title: '💿 Mock 指南', route: 'mock' },
-  { title: '📊 Echarts 演示', route: 'charts' },
   { title: '🎨 Unocss 示例', route: 'unocss' },
   { title: '🍍 持久化 Pinia 状态', route: 'counter' },
   { title: '🙅 404页 演示', route: 'unknown' },
+  { title: '🧡 KeepAlive 演示', route: 'keepalive' },
 ]
 
 const color = useColorMode()
@@ -53,10 +52,9 @@ function toggleDark() {
       v-for="item in menuItems"
       :key="item.route"
     >
-      <!-- item.route -->
       <VanCell
         :title="item.title"
-        to="/"
+        :to="item.route"
         is-link
       />
     </template>

uno.config.ts

@@ -13,6 +13,11 @@ import presetRemToPx from '@unocss/preset-rem-to-px'
 
 // https://unocss.dev/guide/config-file
 export default defineConfig({
+  shortcuts: [
+    // shortcuts to multiple utilities
+    ['btn', 'px-6 py-3 rounded-3 border-none inline-block bg-green-400 text-white cursor-pointer hover:bg-green-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+  ],
+
   presets: [
     presetUno(),
     presetAttributify(),