add nuxt and expo with orpc

apps/cli/templates/frontend/nuxt/app/components/Header.vue.hbs

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { USeparator } from '#components';
+import ModeToggle from './ModeToggle.vue'
+{{#if auth}}
+import UserMenu from './UserMenu.vue'
+{{/if}}
+
+const links = [
+    { to: "/", label: "Home" },
+    {{#if auth}}
+    { to: "/dashboard", label: "Dashboard" },
+    {{/if}}
+    {{#if (includes examples "todo")}}
+    { to: "/todos", label: "Todos" },
+    {{/if}}
+    {{#if (includes examples "ai")}}
+    { to: "/ai", label: "AI Chat" },
+    {{/if}}
+];
+</script>
+
+<template>
+  <div>
+    <div class="flex flex-row items-center justify-between px-2 py-1">
+      <nav class="flex gap-4 text-lg">
+        <NuxtLink
+          v-for="link in links"
+          :key="link.to"
+          :to="link.to"
+          class="text-foreground hover:text-primary"
+          active-class="text-primary font-semibold"
+        >
+          \{{ link.label }}
+        </NuxtLink>
+      </nav>
+      <div class="flex items-center gap-2">
+        <ModeToggle />
+        {{#if auth}}
+        <UserMenu />
+        {{/if}}
+      </div>
+    </div>
+    <USeparator />
+  </div>
+</template>

apps/cli/templates/frontend/nuxt/app/components/Loader.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex h-full items-center justify-center pt-8">
+    <UIcon name="i-lucide-loader-2" class="animate-spin text-2xl" />
+  </div>
+</template>

apps/cli/templates/frontend/nuxt/app/components/ModeToggle.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get () {
+    return colorMode.value === 'dark'
+  },
+  set (value) {
+    colorMode.preference = value ? 'dark' : 'light'
+  }
+})
+</script>
+
+<template>
+  <div class="flex items-center">
+    <USwitch
+      v-model="isDark"
+      :checked-icon="isDark ? 'i-lucide-moon' : ''"
+      :unchecked-icon="!isDark ? 'i-lucide-sun' : ''"
+      class="mr-2"
+    />
+  </div>
+</template>