create-better-t-stack/apps/cli/templates/frontend/nuxt/app/pages/index.vue.hbs

<script setup lang="ts">
{{#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 = `
 ██████╗ ███████╗████████╗████████╗███████╗██████╗
 ██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
 ██████╔╝█████╗     ██║      ██║   █████╗  ██████╔╝
 ██╔══██╗██╔══╝     ██║      ██║   ██╔══╝  ██╔══██╗
 ██████╔╝███████╗   ██║      ██║   ███████╗██║  ██║
 ╚═════╝ ╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚═╝  ╚═╝

 ████████╗    ███████╗████████╗ █████╗  ██████╗██╗  ██╗
 ╚══██╔══╝    ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
    ██║       ███████╗   ██║   ███████║██║     █████╔╝
    ██║       ╚════██║   ██║   ██╔══██║██║     ██╔═██╗
    ██║       ███████║   ██║   ██║  ██║╚██████╗██║  ██╗
    ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
 `;

{{#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">
      <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"
                :class="{
                  'bg-yellow-500 animate-pulse': healthCheck.status.value === 'pending',
                  'bg-green-500': healthCheck.status.value === 'success',
                  'bg-red-500': healthCheck.status.value === 'error',
                  'bg-gray-400': healthCheck.status.value !== 'pending' &&
                                  healthCheck.status.value !== 'success' &&
                                  healthCheck.status.value !== 'error'
                }"
              ></div>
              <span class="text-sm text-muted-foreground">
                <template v-if="healthCheck.status.value === 'pending'">
                  Checking...
                </template>
                <template v-else-if="healthCheck.status.value === 'success'">
                  Connected (\{{ healthCheck.data.value }})
                </template>
                <template v-else-if="healthCheck.status.value === 'error'">
                  Error: \{{ healthCheck.error.value?.message || 'Failed to connect' }}
                </template>
                 <template v-else>
                  Idle
                </template>
              </span>
            </div>
            {{/unless}}
          {{/if}}
        </div>
      </section>
    </div>
  </div>
</template>