feat(cli): add nuxt + convex support (#458)

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+{{#if (eq api "orpc")}}
 import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
+{{/if}}
 </script>
 
 <template>
@@ -9,5 +11,7 @@ import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
             <NuxtPage />
         </NuxtLayout>
     </UApp>
+    {{#if (eq api "orpc")}}
     <VueQueryDevtools />
+    {{/if}}
 </template>

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { USeparator } from '#components';
 import ModeToggle from './ModeToggle.vue'
 {{#if auth}}
 import UserMenu from './UserMenu.vue'

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from "vue";
+
 const colorMode = useColorMode()
 
 const isDark = computed({

apps/cli/templates/frontend/nuxt/app/pages/index.vue.hbs

@@ -1,8 +1,13 @@
 <script setup lang="ts">
-{{#unless (eq api "none")}}
-const { $orpc } = useNuxtApp()
-import { useQuery } from '@tanstack/vue-query'
-{{/unless}}
+{{#if (eq backend "convex")}}
+import { api } from "@{{ projectName }}/backend/convex/_generated/api";
+import { useConvexQuery } from "convex-vue";
+{{else}}
+  {{#unless (eq api "none")}}
+  const { $orpc } = useNuxtApp()
+  import { useQuery } from '@tanstack/vue-query'
+  {{/unless}}
+{{/if}}
 
 const TITLE_TEXT = `
  ██████╗ ███████╗████████╗████████╗███████╗██████╗
@@ -20,19 +25,34 @@ const TITLE_TEXT = `
     ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
  `;
 
-{{#unless (eq api "none")}}
-const healthCheck = useQuery($orpc.healthCheck.queryOptions())
-{{/unless}}
+{{#if (eq backend "convex")}}
+const healthCheck = useConvexQuery(api.healthCheck.get, {});
+{{else}}
+  {{#unless (eq api "none")}}
+  const healthCheck = useQuery($orpc.healthCheck.queryOptions())
+  {{/unless}}
+{{/if}}
 </script>
 
 <template>
   <div class="container mx-auto max-w-3xl px-4 py-2">
     <pre class="overflow-x-auto font-mono text-sm whitespace-pre-wrap">\{{ TITLE_TEXT }}</pre>
     <div class="grid gap-6 mt-4">
-      {{#unless (eq api "none")}}
       <section class="rounded-lg border p-4">
         <h2 class="mb-2 font-medium">API Status</h2>
         <div class="flex items-center gap-2">
+          {{#if (eq backend "convex")}}
+            <span class="text-sm text-muted-foreground">
+              \{{
+                healthCheck === undefined
+                  ? "Checking..."
+                  : healthCheck.data.value === "OK"
+                    ? "Connected"
+                    : "Error"
+              }}
+            </span>
+          {{else}}
+            {{#unless (eq api "none")}}
             <div class="flex items-center gap-2">
               <div
                 class="w-2 h-2 rounded-full"
@@ -60,9 +80,10 @@ const healthCheck = useQuery($orpc.healthCheck.queryOptions())
                 </template>
               </span>
             </div>
-          </div>
+            {{/unless}}
+          {{/if}}
+        </div>
       </section>
-      {{/unless}}
     </div>
   </div>
 </template>

apps/cli/templates/frontend/nuxt/app/plugins/vue-query.ts.hbs

@@ -1,44 +0,0 @@
-import type {
-  DehydratedState,
-  VueQueryPluginOptions,
-} from '@tanstack/vue-query'
-import {
-  dehydrate,
-  hydrate,
-  QueryCache,
-  QueryClient,
-  VueQueryPlugin,
-} from '@tanstack/vue-query'
-
-export default defineNuxtPlugin((nuxt) => {
-  const vueQueryState = useState<DehydratedState | null>('vue-query')
-
-  const toast = useToast()
-
-  const queryClient = new QueryClient({
-    queryCache: new QueryCache({
-      onError: (error) => {
-        console.log(error)
-        toast.add({
-          title: 'Error',
-          description: error?.message || 'An unexpected error occurred.',
-        })
-      },
-    }),
-  })
-  const options: VueQueryPluginOptions = { queryClient }
-
-  nuxt.vueApp.use(VueQueryPlugin, options)
-
-  if (import.meta.server) {
-    nuxt.hooks.hook('app:rendered', () => {
-      vueQueryState.value = dehydrate(queryClient)
-    })
-  }
-
-  if (import.meta.client) {
-    nuxt.hooks.hook('app:created', () => {
-      hydrate(queryClient, vueQueryState.value)
-    })
-  }
-})

apps/cli/templates/frontend/nuxt/nuxt.config.ts.hbs

@@ -2,12 +2,22 @@
 export default defineNuxtConfig({
   compatibilityDate: 'latest',
   devtools: { enabled: true },
-  modules: ['@nuxt/ui'],
+  modules: [
+    '@nuxt/ui'
+    {{#if (eq backend "convex")}},
+    'convex-nuxt'
+    {{/if}}
+  ],
   css: ['~/assets/css/main.css'],
   devServer: {
     port: 3001
   },
   ssr: false,
+  {{#if (eq backend "convex")}}
+  convex: {
+    url: process.env.NUXT_PUBLIC_CONVEX_URL,
+  },
+  {{/if}}
   runtimeConfig: {
     public: {
       serverURL: process.env.NUXT_PUBLIC_SERVER_URL,

apps/cli/templates/frontend/nuxt/package.json.hbs

@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@nuxt/ui": "3.3.0",
-    "@tanstack/vue-query": "^5.83.0",
     "nuxt": "^4.0.2",
     "typescript": "^5.8.3",
     "vue": "^3.5.18",
@@ -20,7 +19,6 @@
   },
   "devDependencies": {
     "tailwindcss": "^4.1.11",
-    "@tanstack/vue-query-devtools": "^5.83.0",
     "@iconify-json/lucide": "^1.2.57"
   }
 }