docs: initial docs setup

Author: LouisHaftmann

docs/.env.example

@@ -0,0 +1,5 @@
+# Production license for @nuxt/ui-pro, get one at https://ui.nuxt.com/pro/purchase
+NUXT_UI_PRO_LICENSE=
+
+# Public URL, used for OG Image when running nuxt generate
+NUXT_PUBLIC_SITE_URL=

docs/.gitignore

@@ -0,0 +1,27 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+# VSC
+.history

docs/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

docs/app.config.ts

@@ -0,0 +1,58 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'blue',
+    gray: 'slate',
+    footer: {
+      bottom: {
+        left: 'text-sm text-gray-500 dark:text-gray-400',
+        wrapper: 'border-t border-gray-200 dark:border-gray-800',
+      },
+    },
+  },
+  seo: {
+    siteName: 'tRPC Vue-Query',
+  },
+  header: {
+    logo: {
+      alt: '',
+      light: '',
+      dark: '',
+    },
+    search: true,
+    colorMode: true,
+    links: [
+      {
+        'icon': 'i-simple-icons-github',
+        'to': 'https://github.com/falcondev-oss/trpc-vue-query',
+        'target': '_blank',
+        'aria-label': 'tRPC Vue-Query on GitHub',
+      },
+    ],
+  },
+  footer: {
+    credits: 'Copyright © 2024',
+    colorMode: false,
+    links: [
+      {
+        'icon': 'i-simple-icons-github',
+        'to': 'https://github.com/falcondev-oss/trpc-vue-query',
+        'target': '_blank',
+        'aria-label': 'tRPC Vue-Query on GitHub',
+      },
+    ],
+  },
+  toc: {
+    title: 'Table of Contents',
+    bottom: {
+      title: 'Community',
+      links: [
+        {
+          icon: 'i-heroicons-star',
+          label: 'Star on GitHub',
+          to: 'https://github.com/falcondev-oss/trpc-vue-query',
+          target: '_blank',
+        },
+      ],
+    },
+  },
+})

docs/app.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+
+const { seo } = useAppConfig()
+
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
+  default: () => [],
+  server: false,
+})
+
+useHead({
+  meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+  link: [{ rel: 'icon', href: '/favicon.ico' }],
+  htmlAttrs: {
+    lang: 'en',
+  },
+})
+
+useSeoMeta({
+  titleTemplate: `%s - ${seo?.siteName}`,
+  ogSiteName: seo?.siteName,
+})
+
+provide('navigation', navigation)
+</script>
+
+<template>
+  <div>
+    <NuxtLoadingIndicator />
+
+    <Header />
+
+    <UMain>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </UMain>
+
+    <Footer />
+
+    <ClientOnly>
+      <LazyUContentSearch :files="files" :navigation="navigation" />
+    </ClientOnly>
+
+    <UNotifications />
+  </div>
+</template>

docs/components/Footer.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { footer } = useAppConfig()
+</script>
+
+<template>
+  <UFooter>
+    <template #left>
+      {{ footer.credits }}
+    </template>
+
+    <template #right>
+      <UColorModeButton v-if="footer?.colorMode" />
+
+      <template v-if="footer?.links">
+        <UButton
+          v-for="(link, index) of footer?.links"
+          :key="index"
+          v-bind="{ color: 'gray', variant: 'ghost', ...link }"
+        />
+      </template>
+    </template>
+  </UFooter>
+</template>

docs/components/Header.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+const navigation = inject<NavItem[]>('navigation', [])
+
+const { header } = useAppConfig()
+</script>
+
+<template>
+  <UHeader>
+    <template #logo>
+      <template v-if="header?.logo?.dark || header?.logo?.light">
+        <UColorModeImage v-bind="{ class: 'h-6 w-auto', ...header?.logo }" />
+      </template>
+      <template v-else>
+        tRPC Vue-Query
+        <UBadge label="Docs" variant="subtle" class="mb-0.5" />
+      </template>
+    </template>
+
+    <template v-if="header?.search" #center>
+      <UContentSearchButton class="hidden lg:flex" />
+    </template>
+
+    <template #right>
+      <UContentSearchButton v-if="header?.search" :label="null" class="lg:hidden" />
+
+      <UColorModeButton v-if="header?.colorMode" />
+
+      <template v-if="header?.links">
+        <UButton
+          v-for="(link, index) of header.links"
+          :key="index"
+          v-bind="{ color: 'gray', variant: 'ghost', ...link }"
+        />
+      </template>
+    </template>
+
+    <template #panel>
+      <UNavigationTree :links="mapContentNavigation(navigation)" />
+    </template>
+  </UHeader>
+</template>

docs/components/OgImage/OgImageDocs.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <div class="flex h-full w-full flex-col justify-center bg-slate-900 p-8 text-center">
+    <div class="relative">
+      <h1 class="mb-4 text-8xl text-white">
+        {{ title }}
+      </h1>
+      <p class="text-5xl leading-tight text-gray-200">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>

docs/content/1.getting-started/1.index.md

@@ -0,0 +1,105 @@
+---
+title: Getting Started
+description: Install and setup tRPC Vue-Query
+---
+
+## Install
+
+::code-group
+
+```bash [pnpm]
+pnpm add @falcondev-oss/trpc-vue-query
+```
+
+```bash [yarn]
+yarn add @falcondev-oss/trpc-vue-query
+```
+
+```bash [bun]
+bun add @falcondev-oss/trpc-vue-query
+```
+
+```bash [npm]
+npm install @falcondev-oss/trpc-vue-query
+```
+
+::
+
+## Setup with Vue 3
+
+```ts [main.ts]
+import { createTRPCVueQueryClient } from '@falcondev-oss/trpc-vue-query'
+import type { AppRouter } from '../your_server/trpc'
+import { VueQueryPlugin, useQueryClient } from '@tanstack/vue-query'
+
+app.use(VueQueryPlugin)
+app.use({
+  install(app) {
+    const queryClient = app.runWithContext(useQueryClient)
+    const trpc = createTRPCVueQueryClient<AppRouter>({
+      queryClient,
+      trpc: {
+        links: [
+          httpBatchLink({
+            url: '/api/trpc',
+          }),
+        ],
+      },
+    })
+
+    app.provide('trpc', trpc)
+  },
+})
+```
+
+```ts [composables/useTRPC.ts]
+import { createTRPCVueQueryClient } from '@falcondev-oss/trpc-vue-query'
+import type { AppRouter } from '../your_server/trpc'
+
+export function useTRPC() {
+  return inject('trpc') as ReturnType<typeof createTRPCVueQueryClient<AppRouter>>
+}
+```
+
+## Setup with Nuxt 3
+
+Setup `trpc-nuxt` as described in their [documentation](https://trpc-nuxt.vercel.app/get-started/usage/recommended). Then update the `plugins/client.ts` file:
+
+```ts [plugins/client.ts]
+import { createTRPCVueQueryClient } from '@falcondev-oss/trpc-vue-query'
+import { useQueryClient } from '@tanstack/vue-query'
+import { httpBatchLink } from 'trpc-nuxt/client'
+import type { AppRouter } from '~/server/trpc/routers'
+
+export default defineNuxtPlugin(() => {
+  const queryClient = useQueryClient()
+
+  // ⬇️ use `createTRPCVueQueryClient` instead of `createTRPCNuxtClient` ⬇️
+  const trpc = createTRPCVueQueryClient<AppRouter>({
+    queryClient,
+    trpc: {
+      links: [
+        httpBatchLink({
+          url: '/api/trpc',
+        }),
+      ],
+    },
+  })
+
+  return {
+    provide: {
+      trpc,
+    },
+  }
+})
+```
+
+```ts [composables/useTRPC.ts]
+export function useTRPC() {
+  return useNuxtApp().$trpc
+}
+```
+
+## Acknowledgements
+
+Huge thanks to [Robert Soriano](https://github.com/wobsoriano) for creating `nuxt-trpc`! We just adapted his work to work with Vue Query.