Update Nuxt, some other dependencies, plus improvements to codebase

- Update to Nuxt 4.1
- Update other dependencies to latest versions (aside from Drizzle)
- Update code to include more real-world examples, such as shared
validation and server routes

Author: raggesilver

.npmrc

@@ -1,23 +1,22 @@
-# Angry Nuxt Template
+# 😡 Angry Nuxt Template
 
-This is a template for a Nuxt 4\* project.
+Easiest way to start and deploy a Nuxt 4 project on Cloudflare, via Nuxt Hub.
 
-> \* Nuxt 4 has not been released yet, but we already have feature flags and
-> directory structure that are compatible with it.
+[![Deploy to NuxtHub](https://hub.nuxt.com/button.svg)](https://hub.nuxt.com/new?template=raggesilver/angry-nuxt)
 
 ## What is included?
 
-- [x] Nuxt 4 compatible
 - [x] Nuxt SEO
 - [x] [UnoCSS](https://unocss.dev/) — Tailwind CSS compatible, but faster and more feature-rich
 - [x] [Shadcn Vue](https://shadcn-vue.com) — Pre-configured Shadcn components
   - Includes Zod and VeeValidate for fully typed forms
 - [x] [Drizzle ORM](https://orm.drizzle.team) with Cloudflare D1
   - Automatic migrations in development ✅
 - [x] Prettier + ESLint
+- [x] Nuxt Hub — Easy Cloudflare deployments
 
 ## Setup
 
 ```bash
-npx nuxi@latest init --template raggesilver/angry-nuxt-template
+bunx nuxt@latest init --template raggesilver/angry-nuxt
 ```

README.md

@@ -1,7 +1,14 @@
+<script setup lang="ts">
+import { Toaster } from "~/components/ui/sonner";
+
+import "vue-sonner/style.css";
+</script>
+
 <template>
   <NuxtLoadingIndicator />
   <NuxtRouteAnnouncer />
   <NuxtLayout>
     <NuxtPage />
+    <Toaster rich-colors />
   </NuxtLayout>
 </template>

app/app.vue

@@ -1,5 +1,5 @@
-:root {
-  --primary: 60% 100% 50%;
+* {
+  @apply scroll-smooth;
 }
 
 body {

app/assets/css/main.css

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { signUpSchema } from "#shared/validation/sign-up";
+import { toTypedSchema } from "@vee-validate/zod";
+import { LoaderIcon } from "lucide-vue-next";
+import { useForm } from "vee-validate";
+import { toast } from "vue-sonner";
+import { isFetchError } from "~/lib/is-ofetch-error";
+
+const validationSchema = toTypedSchema(signUpSchema);
+
+const form = useForm({
+  validationSchema,
+  initialValues: {
+    name: "",
+    tos: false,
+  },
+});
+
+const isSubmitting = computed(() => form.isSubmitting.value);
+
+const onSubmit = form.handleSubmit(async (values, { resetForm }) => {
+  try {
+    await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate network delay
+    const response = await $fetch("/sign-up", { method: "POST", body: values });
+    toast.success(response.message);
+    resetForm();
+  } catch (error) {
+    if (isFetchError(error)) {
+      toast.error(error.statusMessage ?? error.message);
+    } else {
+      toast.error("An unexpected error occurred.");
+      console.error(error);
+    }
+  }
+});
+</script>
+
+<template>
+  <form @submit="onSubmit" @reset="form.handleReset">
+    <div>
+      <p class="text-xl font-bold">Sign Up</p>
+      <p class="text-sm text-muted-foreground">
+        Create an account to get started.
+      </p>
+    </div>
+    <FormField v-slot="{ componentField }" name="name">
+      <FormItem>
+        <FormLabel>Name</FormLabel>
+        <FormControl>
+          <Input type="text" v-bind="componentField" placeholder="Jane Doe" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+    <FormField v-slot="{ value, handleChange }" type="checkbox" name="tos">
+      <FormItem>
+        <div class="space-y-4 leading-none">
+          <div class="flex items-center space-x-2">
+            <FormControl>
+              <Checkbox
+                :model-value="value"
+                @update:model-value="handleChange"
+              />
+            </FormControl>
+            <FormLabel
+              class="text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >I agree to the terms of service.</FormLabel
+            >
+          </div>
+          <FormMessage />
+        </div>
+      </FormItem>
+    </FormField>
+    <div class="grid lt-sm:grid-cols-1 sm:grid-cols-2 gap-2">
+      <Button type="reset" variant="secondary" :disabled="isSubmitting"
+        >Reset</Button
+      >
+      <Button
+        type="submit"
+        class="flex items-center gap-2"
+        :disabled="isSubmitting"
+      >
+        <span>Submit</span>
+        <LoaderIcon v-if="isSubmitting" class="animate-spin w-[1em]" />
+      </Button>
+    </div>
+
+    <span
+      aria-hidden="true"
+      class="absolute w-3 h-3 rounded-full bg-primary/30 -top-1.5 -right-1.5 animate-ping"
+    ></span>
+
+    <span
+      aria-hidden="true"
+      class="absolute w-2 h-2 rounded-full bg-primary -top-1 -right-1"
+    ></span>
+  </form>
+</template>

app/components/sign-up-form.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { Primitive, type PrimitiveProps } from "reka-ui";
+import type { PrimitiveProps } from "reka-ui";
+import { Primitive } from "reka-ui";
 import type { HTMLAttributes } from "vue";
-import { type ButtonVariants, buttonVariants } from ".";
+import type { ButtonVariants } from ".";
+import { buttonVariants } from ".";
 
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants["variant"];

app/components/ui/button/Button.vue

@@ -1,4 +1,5 @@
-import { cva, type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
 export { default as Button } from "./Button.vue";
 

app/components/ui/button/index.ts

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { cn } from "@/lib/utils";
 import { useId } from "reka-ui";
-import { type HTMLAttributes, provide } from "vue";
+import type { HTMLAttributes } from "vue";
+import { provide } from "vue";
 import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
 
 const props = defineProps<{

app/components/ui/form/FormItem.vue

@@ -14,7 +14,7 @@ const { error, formItemId } = useFormField();
   <Label
     data-slot="form-label"
     :data-error="!!error"
-    :class="cn('data-[error=true]:text-destructive-foreground', props.class)"
+    :class="cn('data-[error=true]:text-destructive', props.class)"
     :for="formItemId"
   >
     <slot />

app/components/ui/form/FormLabel.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { cn } from "@/lib/utils";
 import { ErrorMessage } from "vee-validate";
-import { type HTMLAttributes, toValue } from "vue";
+import type { HTMLAttributes } from "vue";
+import { toValue } from "vue";
 import { useFormField } from "./useFormField";
 
 const props = defineProps<{
@@ -17,6 +18,6 @@ const { name, formMessageId } = useFormField();
     data-slot="form-message"
     as="p"
     :name="toValue(name)"
-    :class="cn('text-destructive-foreground text-sm', props.class)"
+    :class="cn('text-destructive text-sm', props.class)"
   />
 </template>