PageSourceSearch

https://showcase-nuxt-003.vercel.app/

html showcase-nuxt-003.vercel.app collected 2026-10-03 07:42:01 UTC 24,472 bytes, 97 lines download raw bytes

1<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style id="nuxt-ui-colors">@layer theme {
2  :root, :host {
3  --ui-color-primary-50: var(--color-green-50, oklch(98.2% 0.018 155.826));
4  --ui-color-primary-100: var(--color-green-100, oklch(96.2% 0.044 156.743));
5  --ui-color-primary-200: var(--color-green-200, oklch(92.5% 0.084 155.995));
6  --ui-color-primary-300: var(--color-green-300, oklch(87.1% 0.15 154.449));
7  --ui-color-primary-400: var(--color-green-400, oklch(79.2% 0.209 151.711));
8  --ui-color-primary-500: var(--color-green-500, oklch(72.3% 0.219 149.579));
9  --ui-color-primary-600: var(--color-green-600, oklch(62.7% 0.194 149.214));
10  --ui-color-primary-700: var(--color-green-700, oklch(52.7% 0.154 150.069));
11  --ui-color-primary-800: var(--color-green-800, oklch(44.8% 0.119 151.328));
12  --ui-color-primary-900: var(--color-green-900, oklch(39.3% 0.095 152.535));
13  --ui-color-primary-950: var(--color-green-950, oklch(26.6% 0.065 152.934));
14  --ui-color-secondary-50: var(--color-orange-50, oklch(98% 0.016 73.684));
15  --ui-color-secondary-100: var(--color-orange-100, oklch(95.4% 0.038 75.164));
16  --ui-color-secondary-200: var(--color-orange-200, oklch(90.1% 0.076 70.697));
17  --ui-color-secondary-300: var(--color-orange-300, oklch(83.7% 0.128 66.29));
18  --ui-color-secondary-400: var(--color-orange-400, oklch(75% 0.183 55.934));
19  --ui-color-secondary-500: var(--color-orange-500, oklch(70.5% 0.213 47.604));
20  --ui-color-secondary-600: var(--color-orange-600, oklch(64.6% 0.222 41.116));
21  --ui-color-secondary-700: var(--color-orange-700, oklch(55.3% 0.195 38.402));
22  --ui-color-secondary-800: var(--color-orange-800, oklch(47% 0.157 37.304));
23  --ui-color-secondary-900: var(--color-orange-900, oklch(40.8% 0.123 38.172));
24  --ui-color-secondary-950: var(--color-orange-950, oklch(26.6% 0.079 36.259));
25  --ui-color-success-50: var(--color-emerald-50, oklch(97.9% 0.021 166.113));
26  --ui-color-success-100: var(--color-emerald-100, oklch(95% 0.052 163.051));
27  --ui-color-success-200: var(--color-emerald-200, oklch(90.5% 0.093 164.15));
28  --ui-color-success-300: var(--color-emerald-300, oklch(84.5% 0.143 164.978));
29  --ui-color-success-400: var(--color-emerald-400, oklch(76.5% 0.177 163.223));
30  --ui-color-success-500: var(--color-emerald-500, oklch(69.6% 0.17 162.48));
31  --ui-color-success-600: var(--color-emerald-600, oklch(59.6% 0.145 163.225));
32  --ui-color-success-700: var(--color-emerald-700, oklch(50.8% 0.118 165.612));
33  --ui-color-success-800: var(--color-emerald-800, oklch(43.2% 0.095 166.913));
34  --ui-color-success-900: var(--color-emerald-900, oklch(37.8% 0.077 168.94));
35  --ui-color-success-950: var(--color-emerald-950, oklch(26.2% 0.051 172.552));
36  --ui-color-info-50: var(--color-blue-50, oklch(97% 0.014 254.604));
37  --ui-color-info-100: var(--color-blue-100, oklch(93.2% 0.032 255.585));
38  --ui-color-info-200: var(--color-blue-200, oklch(88.2% 0.059 254.128));
39  --ui-color-info-300: var(--color-blue-300, oklch(80.9% 0.105 251.813));
40  --ui-color-info-400: var(--color-blue-400, oklch(70.7% 0.165 254.624));
41  --ui-color-info-500: var(--color-blue-500, oklch(62.3% 0.214 259.815));
42  --ui-color-info-600: var(--color-blue-600, oklch(54.6% 0.245 262.881));
43  --ui-color-info-700: var(--color-blue-700, oklch(48.8% 0.243 264.376));
44  --ui-color-info-800: var(--color-blue-800, oklch(42.4% 0.199 265.638));
45  --ui-color-info-900: var(--color-blue-900, oklch(37.9% 0.146 265.522));
46  --ui-color-info-950: var(--color-blue-950, oklch(28.2% 0.091 267.935));
47  --ui-color-warning-50: var(--color-yellow-50, oklch(98.7% 0.026 102.212));
48  --ui-color-warning-100: var(--color-yellow-100, oklch(97.3% 0.071 103.193));
49  --ui-color-warning-200: var(--color-yellow-200, oklch(94.5% 0.129 101.54));
50  --ui-color-warning-300: var(--color-yellow-300, oklch(90.5% 0.182 98.111));
51  --ui-color-warning-400: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
52  --ui-color-warning-500: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
53  --ui-color-warning-600: var(--color-yellow-600, oklch(68.1% 0.162 75.834));
54  --ui-color-warning-700: var(--color-yellow-700, oklch(55.4% 0.135 66.442));
55  --ui-color-warning-800: var(--color-yellow-800, oklch(47.6% 0.114 61.907));
56  --ui-color-warning-900: var(--color-yellow-900, oklch(42.1% 0.095 57.708));
57  --ui-color-warning-950: var(--color-yellow-950, oklch(28.6% 0.066 53.813));
58  --ui-color-error-50: var(--color-red-50, oklch(97.1% 0.013 17.38));
59  --ui-color-error-100: var(--color-red-100, oklch(93.6% 0.032 17.717));
60  --ui-color-error-200: var(--color-red-200, oklch(88.5% 0.062 18.334));
61  --ui-color-error-300: var(--color-red-300, oklch(80.8% 0.114 19.571));
62  --ui-color-error-400: var(--color-red-400, oklch(70.4% 0.191 22.216));
63  --ui-color-error-500: var(--color-red-500, oklch(63.7% 0.237 25.331));
64  --ui-color-error-600: var(--color-red-600, oklch(57.7% 0.245 27.325));
65  --ui-color-error-700: var(--color-red-700, oklch(50.5% 0.213 27.518));
66  --ui-color-error-800: var(--color-red-800, oklch(44.4% 0.177 26.899));
67  --ui-color-error-900: var(--color-red-900, oklch(39.6% 0.141 25.723));
68  --ui-color-error-950: var(--color-red-950, oklch(25.8% 0.092 26.042));
69  --ui-color-neutral-50: var(--color-gray-50, oklch(98.5% 0.002 247.839));
70  --ui-color-neutral-100: var(--color-gray-100, oklch(96.7% 0.003 264.542));
71  --ui-color-neutral-200: var(--color-gray-200, oklch(92.8% 0.006 264.531));
72  --ui-color-neutral-300: var(--color-gray-300, oklch(87.2% 0.01 258.338));
73  --ui-color-neutral-400: var(--color-gray-400, oklch(70.7% 0.022 261.325));
74  --ui-color-neutral-500: var(--color-gray-500, oklch(55.1% 0.027 264.364));
75  --ui-color-neutral-600: var(--color-gray-600, oklch(44.6% 0.03 256.802));
76  --ui-color-neutral-700: var(--color-gray-700, oklch(37.3% 0.034 259.733));
77  --ui-color-neutral-800: var(--color-gray-800, oklch(27.8% 0.033 256.848));
78  --ui-color-neutral-900: var(--color-gray-900, oklch(21% 0.034 264.665));
79  --ui-color-neutral-950: var(--color-gray-950, oklch(13% 0.028 261.692));
80  }
81  :root, :host, .light {
82  --ui-primary: var(--ui-color-primary-500);
83  --ui-secondary: var(--ui-color-secondary-500);
84  --ui-success: var(--ui-color-success-500);
85  --ui-info: var(--ui-color-info-500);
86  --ui-warning: var(--ui-color-warning-500);
87  --ui-error: var(--ui-color-error-500);
88  }
89  .dark {
90  --ui-primary: var(--ui-color-primary-400);
91  --ui-secondary: var(--ui-color-secondary-400);
92  --ui-success: var(--ui-color-success-400);
93  --ui-info: var(--ui-color-info-400);
94  --ui-warning: var(--ui-color-warning-400);
95  --ui-error: var(--ui-color-error-400);
96  }
97}</style><title>Nuxt 4 Showcase</title><link rel="stylesheet" href="/_nuxt/entry.xJ6lS1JZ.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/_nuxt/lCwExheh.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/DaLK1Ppz.js">
97<link rel="modulepreload" as="script" crossorigin href="/_nuxt/CW3_DhMZ.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/BUtdQJsu.js"><link rel="preload" as="fetch" fetchpriority="low" crossorigin="anonymous" href="/_nuxt/builds/meta/97ab227e-7b10-4d1c-a5e0-a579a0779892.json">
97<script type="module" src="/_nuxt/lCwExheh.js" crossorigin></script>
97<meta name="description" content="A showcase of Nuxt 4 features and best practices">
97<script>"use strict";(()=>{const t=window,e=document.documentElement,c=["dark","light"],n=getStorageValue("localStorage","nuxt-color-mode")||"system";let i=n==="system"?u():n;const r=e.getAttribute("data-color-mode-forced");r&&(i=r),l(i),t["__NUXT_COLOR_MODE__"]={preference:n,value:i,getColorScheme:u,addColorScheme:l,removeColorScheme:d};function l(o){const s=""+o+"",a="";e.classList?e.classList.add(s):e.className+=" "+s,a&&e.setAttribute("data-"+a,o)}function d(o){const s=""+o+"",a="";e.classList?e.classList.remove(s):e.className=e.className.replace(new RegExp(s,"g"),""),a&&e.removeAttribute("data-"+a)}function f(o){return t.matchMedia("(prefers-color-scheme"+o+")")}function u(){if(t.matchMedia&&f("").media!=="not all"){for(const o of c)if(f(":"+o).matches)return o}return"light"}})();function getStorageValue(t,e){switch(t){case"localStorage":return window.localStorage.getItem(e);case"sessionStorage":return window.sessionStorage.getItem(e);case"cookie":return getCookie(e);default:return null}}function getCookie(t){const c=("; "+window.document.cookie).split("; "+t+"=");if(c.length===2)return c.pop()?.split(";").shift()}</script>
97</head><body><div id="__nuxt" class="isolate"><!--[--><!--[--><!--[--><!--[--><!--[--><div class="min-h-screen flex flex-col"><nav class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50 transition-colors duration-300"><div class="container-custom"><div class="flex justify-between items-center h-16"><a aria-current="page" href="/" class="router-link-active router-link-exact-active text-xl font-bold text-primary-700 hover:text-primary-800 transition-colors dark:text-primary-500 dark:hover:text-primary-400"> Nuxt Showcase 003 </a><div class="hidden md:flex items-center space-x-8"><!--[--><a aria-current="page" href="/" class="text-primary-600 dark:text-primary-400 router-link-exact-active flex items-center space-x-2 text-gray-600 hover:text-primary-600 transition-colors font-medium dark:text-gray-300 dark:hover:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path></svg><span>Home</span></a><a href="/nuxt-ui" class="flex items-center space-x-2 text-gray-600 hover:text-primary-600 transition-colors font-medium dark:text-gray-300 dark:hover:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z"></path></svg><span>Nuxt UI</span></a><a href="/products" class="flex items-center space-x-2 text-gray-600 hover:text-primary-600 transition-colors font-medium dark:text-gray-300 dark:hover:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg><span>Products</span></a><a href="/employees" class="flex items-center space-x-2 text-gray-600 hover:text-primary-600 transition-colors font-medium dark:text-gray-300 dark:hover:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"></path></svg><span>Employees</span></a><a href="/customers" class="flex items-center space-x-2 text-gray-600 hover:text-primary-600 transition-colors font-medium dark:text-gray-300 dark:hover:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path></svg><span>Customers</span></a><a href="/about" class="flex items-center space-x-2 text-gray-600 hover:text-primary-600 transition-colors font-medium dark:text-gray-300 dark:hover:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"></path></svg><span>About</span></a>
97<!--]--><button class="p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors dark:text-gray-300 dark:hover:bg-gray-800" aria-label="Toggle dark mode"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"></path></svg></button></div><div class="flex items-center space-x-2 md:hidden"><button class="p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors dark:text-gray-300 dark:hover:bg-gray-800" aria-label="Toggle dark mode"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"></path></svg></button><button class="p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors dark:text-gray-300 dark:hover:bg-gray-800" aria-label="Toggle menu"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div></div></div><!----></nav><main class="flex-1 py-12"><div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8"><!--[--><!--[--><div class="max-w-5xl mx-auto py-12 px-4 flex flex-col gap-12"><div class="text-center"><p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto"> This site is a collection of examples demonstrating modern Nuxt 4 features, best practices, and UI patterns. </p></div><div class="grid grid-cols-1 md:grid-cols-2 gap-6"><!--[--><a href="/nuxt-ui" class="group relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 transition-all duration-300 hover:shadow-lg hover:scale-[1.02] hover:border-primary-300 dark:hover:border-primary-700"><div class="mb-4"><div class="inline-flex p-3 rounded-lg transition-colors duration-300 bg-primary-50 dark:bg-primary-900/20 group-hover:bg-primary-100 dark:group-hover:bg-primary-900/40"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-6 h-6 transition-colors duration-300 text-primary-600 dark:text-primary-400"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122"></path></svg></div></div><h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">Nuxt UI</h2><p class="text-gray-600 dark:text-gray-400 leading-relaxed">Explore beautiful, accessible UI components built with Nuxt UI</p><div class="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300"><svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg></div></a><a href="/products" class="group relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 transition-all duration-300 hover:shadow-lg hover:scale-[1.02] hover:border-primary-300 dark:hover:border-primary-700"><div class="mb-4"><div class="inline-flex p-3 rounded-lg transition-colors duration-300 bg-green-50 dark:bg-green-900/20 group-hover:bg-green-100 dark:group-hover:bg-green-900/40"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-6 h-6 transition-colors duration-300 text-green-600 dark:text-green-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5
97h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"></path></svg></div></div><h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">Products</h2><p class="text-gray-600 dark:text-gray-400 leading-relaxed">Form example using $fetch with comprehensive error handling</p><div class="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300"><svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg></div></a><a href="/employees" class="group relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 transition-all duration-300 hover:shadow-lg hover:scale-[1.02] hover:border-primary-300 dark:hover:border-primary-700"><div class="mb-4"><div class="inline-flex p-3 rounded-lg transition-colors duration-300 bg-blue-50 dark:bg-blue-900/20 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/40"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-6 h-6 transition-colors duration-300 text-blue-600 dark:text-blue-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"></path></svg></div></div><h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">Employees</h2><p class="text-gray-600 dark:text-gray-400 leading-relaxed">Full CRUD implementation with $fetch and data tables</p><div class="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300"><svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg></div></a><a href="/customers" class="group relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 transition-all duration-300 hover:shadow-lg hover:scale-[1.02] hover:border-primary-300 dark:hover:border-primary-700"><div class="mb-4"><div class="inline-flex p-3 rounded-lg transition-colors duration-300 bg-blue-50 dark:bg-blue-900/20 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/40"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-6 h-6 transition-colors duration-300 text-blue-600 dark:text-blue-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"></path></svg></div></div><h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">Customers</h2><p class="text-gray-600 dark:text-gray-400 leading-relaxed">Example of a reactive form with useFetch()</p><div class="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300"><svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
97<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg></div></a><!--]--></div><div data-slot="root" class="rounded-lg overflow-hidden ring ring-default divide-y divide-default font-mono bg-indigo-200/50 dark:bg-indigo-900/20 border-indigo-200/50 dark:border-indigo-900/50"><div data-slot="header" class="p-4 sm:px-6"><!--[--><p>Examples of accessing environment variables (see /app/lib/env.ts to see how you can validate your .env variables with Zod) </p><!--]--></div><div data-slot="body" class="p-4 sm:p-6"><!--[--><ul class="list-disc ml-5 text-sm text-gray-500 dark:text-gray-400 flex flex-col gap-3"><li>NODE_ENV = production</li><li>CACHE_DRIVER = redis</li></ul><!--]--></div><!----></div></div><!--]--><!--]--></div></main><footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-800 py-8 transition-colors duration-300"><div class="container-custom text-center text-gray-600 dark:text-gray-400"><p>See more <a href="https://tanguay.info" class="underline text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 transition-colors">Edward&#39;s Projects</a></p></div></footer></div><!--]--><!--]--><!--[--><!--]--><!--v-if--><!--]--><!--[--><!--]--><!--]--><!--]--></div><div id="teleports"></div>
97<script>window.__NUXT__={};window.__NUXT__.config={public:{nodeEnv:"production",cacheDriver:"redis",logLevel:"warn"},app:{baseURL:"/",buildId:"97ab227e-7b10-4d1c-a5e0-a579a0779892",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
97<script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":4,"once":11,"_errors":12,"serverRendered":8,"path":14},["ShallowReactive",3],{},["Reactive",5],{"$scolor-mode":6,"$stoasts":10},{"preference":7,"value":7,"unknown":8,"forced":9},"system",true,false,[],["Set"],["ShallowReactive",13],{},"/"]</script>
97</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.