Docs/UI library vue nuxt clients (supabase#38279)

* docs: add vue client to ui-library

* docs: add missing vue client to llms.txt

* docs: add nuxt client to ui-library

* docs: wrong env variable names

* docs: fix dependencies

* docs: update client-nuxtjs.json

* Reinstall the deps so that the pnpm-lock.yaml has less changes.

* Add blocks/vue package.

* Remove the vue blocks from ui-library.

* Copy the vue blocks into ui-library.

* Clean up unneeded files.

* Regenerate the pnpm-lock file from master.

* Fix prettier errors.

* docs: update shadcn-vue cli

* docs: reusable server client

* Small things

* docs: improvments after CR

---------

Co-authored-by: Ivan Vasilov <[email protected]>
Co-authored-by: Terry Sutton <[email protected]>

Author: 3 people

apps/ui-library/components/block-item.tsx

@@ -12,9 +12,11 @@ interface BlockItemProps {
 }
 
 export const BlockItem = ({ name }: BlockItemProps) => {
+  const framework = name.includes('vue') || name.includes('nuxtjs') ? 'vue' : 'react'
+
   return (
     <div className="mt-4">
-      <Command name={name} highlight />
+      <Command name={name} highlight framework={framework} />
       <OpenInV0Button name={name} className="w-fit shrink-0 mt-4" />
     </div>
   )

apps/ui-library/components/command.tsx

@@ -8,13 +8,15 @@ import { useLocalStorage } from './use-local-storage'
 interface CommandCopyProps {
   name: string
   highlight?: boolean
+  // For Vue, we need to use the `shadcn-vue` package instead of `shadcn`
+  framework?: 'react' | 'vue'
 }
 
 type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun'
 
 const LOCAL_STORAGE_KEY = 'package-manager-copy-command'
 
-export function Command({ name, highlight }: CommandCopyProps) {
+export function Command({ name, highlight, framework = 'react' }: CommandCopyProps) {
   const [value, setValue] = useLocalStorage(LOCAL_STORAGE_KEY, 'npm')
 
   const getBaseUrl = () => {
@@ -30,12 +32,27 @@ export function Command({ name, highlight }: CommandCopyProps) {
   const baseUrl = getBaseUrl()
   const componentPath = `${process.env.NEXT_PUBLIC_BASE_PATH ?? ''}/r/${name}.json`
 
-  const commands: Record<PackageManager, string> = {
-    npm: `npx shadcn@latest add ${baseUrl}${componentPath}`,
-    pnpm: `pnpm dlx shadcn@latest add ${baseUrl}${componentPath}`,
-    yarn: `yarn dlx shadcn@latest add ${baseUrl}${componentPath}`,
-    bun: `bunx --bun shadcn@latest add ${baseUrl}${componentPath}`,
-  }
+  const commands: Record<PackageManager, string> =
+    framework === 'react'
+      ? {
+          npm: `npx shadcn@latest add ${baseUrl}${componentPath}`,
+          pnpm: `pnpm dlx shadcn@latest add ${baseUrl}${componentPath}`,
+          yarn: `yarn dlx shadcn@latest add ${baseUrl}${componentPath}`,
+          bun: `bunx --bun shadcn@latest add ${baseUrl}${componentPath}`,
+        }
+      : framework === 'vue'
+        ? {
+            npm: `npx shadcn-vue@latest add ${baseUrl}${componentPath}`,
+            pnpm: `pnpm dlx shadcn-vue@latest add ${baseUrl}${componentPath}`,
+            yarn: `yarn dlx shadcn-vue@latest add ${baseUrl}${componentPath}`,
+            bun: `bunx --bun shadcn-vue@latest add ${baseUrl}${componentPath}`,
+          }
+        : {
+            npm: `npx shadcn@latest add ${baseUrl}${componentPath}`,
+            pnpm: `pnpm dlx shadcn@latest add ${baseUrl}${componentPath}`,
+            yarn: `yarn dlx shadcn@latest add ${baseUrl}${componentPath}`,
+            bun: `bunx --bun shadcn@latest add ${baseUrl}${componentPath}`,
+          }
 
   return (
     <Tabs_Shadcn_ value={value} onValueChange={setValue} className="w-full">

apps/ui-library/config/docs.ts

@@ -54,7 +54,7 @@ export const componentPages: SidebarNavGroup = {
   items: [
     {
       title: 'Client',
-      supportedFrameworks: ['nextjs', 'react-router', 'tanstack', 'react'],
+      supportedFrameworks: ['nextjs', 'react-router', 'tanstack', 'react', 'vue', 'nuxtjs'],
       href: '/docs/nextjs/client',
       items: [],
       commandItemLabel: 'Supabase Client',
@@ -141,4 +141,6 @@ export const frameworkTitles: Record<string, string> = {
   'react-router': 'React Router',
   tanstack: 'TanStack Start',
   react: 'React SPA',
+  vue: 'Vue',
+  nuxtjs: 'Nuxt.js',
 }

apps/ui-library/content/docs/nuxtjs/client.mdx

@@ -0,0 +1,44 @@
+---
+title: Supabase Client Libraries
+description: Supabase client for Nuxt.js
+---
+
+## Installation
+
+<BlockItem name="supabase-client-nuxtjs" description="Supabase Client for Nuxt.js" />
+
+## Folder structure
+
+<RegistryBlock itemName="supabase-client-nuxtjs" />
+
+## Usage
+
+This block installs a Supabase client for connecting your Nuxt.js project to Supabase. It's designed to fully supports server-side rendering (SSR).
+
+If you've already set up your Supabase client—either using the `npm create nuxt@latest` template or another method—you can continue using your existing setup.
+
+### Getting started
+
+After installing the block, you'll have the following environment variables in your `.env.local` file:
+
+```env
+NUXT_PUBLIC_SUPABASE_URL=
+NUXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY=
+```
+
+- If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true&tab=frameworks&framework=vuejs&using=supabasejs) under App Frameworks or in your project's [API keys](https://supabase.com/dashboard/project/_/settings/api-keys).
+
+- If you're using a local instance of Supabase, you can find these values by running `supabase start` or `supabase status` (if you already have it running).
+
+- Nuxt recommends [NuxtSupabase](https://supabase.nuxtjs.org/) module to integrate Nuxt application with Supabase. It’s an alternative to this approach, but both approaches are fine.
+
+<Callout type="warning" className="mt-4">
+  {' '}
+  This Supabase client is built for SSR with the Nuxt.js. If you're building a Vue SPA, use the [Vue
+  SPA client](/ui/docs/vue/client) instead.{' '}
+</Callout>
+
+## Further reading
+
+- [Use Supabase with Nuxt](https://supabase.com/docs/guides/getting-started/quickstarts/nuxtjs)
+- [Build a User Management App with Nuxt 3](https://supabase.com/docs/guides/getting-started/tutorials/with-nuxt-3)

apps/ui-library/content/docs/vue/client.mdx

@@ -0,0 +1,59 @@
+---
+title: Supabase Client Libraries
+description: Supabase client for Vue Single Page Applications
+---
+
+## Installation
+
+<BlockItem name="supabase-client-vue" description="Supabase Client for Vue SPA" />
+
+## Folder structure
+
+<RegistryBlock itemName="supabase-client-vue" />
+
+## Usage
+
+This block installs a Supabase client for connecting your Vue project to Supabase. It's designed for use in client-side components.
+
+If you've already set up a Supabase client in your project, you can just continue using that existing setup.
+
+### Getting started
+
+After installing the block, you'll have the following environment variables in your `.env.local` file:
+
+```env
+VITE_SUPABASE_URL=
+VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY=
+```
+
+- If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true&tab=frameworks&framework=vuejs&using=supabasejs) under App Frameworks or in your project's [API keys](https://supabase.com/dashboard/project/_/settings/api-keys).
+
+- If you're using a local instance of Supabase, you can find these values by running `supabase start` or `supabase status` (if you already have it running).
+
+You can use the client in your Vue component like following:
+
+```vue
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { createClient } from './lib/supabase/client'
+
+const profile = ref(null)
+
+onMounted(async () => {
+  const { data, error } = await createClient.from('profiles').select('*').single()
+
+  if (!error) profile.value = data
+})
+</script>
+
+<template>
+  <div>
+    {{ profile }}
+  </div>
+</template>
+```
+
+## Further reading
+
+- [Generating TypeScript types for your client](https://supabase.com/docs/guides/api/rest/generating-types)
+- [Use Supabase with Vue](https://supabase.com/docs/guides/getting-started/quickstarts/vue)

apps/ui-library/package.json

@@ -7,7 +7,7 @@
     "preinstall": "npx only-allow pnpm",
     "dev": "next dev --port 3004",
     "build": "pnpm run content:build && pnpm run build:registry && pnpm run build:llms && next build --turbopack",
-    "build:registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && prettier --cache --write registry.json && rimraf -G public/r && shadcn build && tsx scripts/clean-registry.ts",
+    "build:registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && prettier --cache --write registry.json && rimraf -G public/r && shadcn build && cp node_modules/@supabase/vue-blocks/public/r/* public/r && tsx scripts/clean-registry.ts",
     "build:llms": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-llms-txt.ts",
     "start": "next start",
     "lint": "next lint",
@@ -50,6 +50,7 @@
     "@supabase/postgrest-js": "*",
     "@supabase/supa-mdx-lint": "0.2.6-alpha",
     "@tanstack/react-query": "^5.83.0",
+    "@supabase/vue-blocks": "workspace:*",
     "axios": "^1.11.0",
     "class-variance-authority": "*",
     "cmdk": "^1.0.0",

apps/ui-library/public/llms.txt

@@ -81,3 +81,7 @@ Library of components for your project. The components integrate with Supabase a
     - Real-time cursor sharing for collaborative applications
 - [Social Authentication](https://supabase.com/ui/docs/tanstack/social-auth)
     - Social authentication block for Tanstack Start
+- [Supabase Client Libraries](https://supabase.com/ui/docs/vue/client)
+    - Supabase client for Vue Single Page Applications
+- [Supabase Client Libraries](https://supabase.com/ui/docs/nuxtjs/client)
+    - Supabase client for Nuxt.js

apps/ui-library/public/r/supabase-client-nuxtjs.json

@@ -0,0 +1,42 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "supabase-client-nuxtjs",
+  "type": "registry:lib",
+  "title": "Supabase Client for Nuxt.js",
+  "description": "",
+  "dependencies": [
+    "@supabase/ssr@latest",
+    "@supabase/supabase-js@latest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "registry/default/clients/nuxtjs/lib/supabase/client.ts",
+      "content": "import { createBrowserClient } from '@supabase/ssr'\n\nexport function createClient() {\n  return createBrowserClient(\n    process.env.NUXT_PUBLIC_SUPABASE_URL!,\n    process.env.NUXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY!\n  )\n}\n",
+      "type": "registry:lib"
+    },
+    {
+      "path": "registry/default/clients/nuxtjs/server/middleware/is-authenticated.ts",
+      "content": "import { defineNuxtRouteMiddleware, navigateTo, useRequestEvent } from 'nuxt/app'\nimport { createSupabaseServerClient } from '../supabase/client'\n\nexport default defineNuxtRouteMiddleware(async (to) => {\n  const event = useRequestEvent()\n\n  // create Supabase SSR client directly here\n  const supabase = createSupabaseServerClient(event);\n\n  // check current user\n  const { data: { user } } = await supabase.auth.getUser()\n\n  if (!user && to.path !== '/login') {\n    return navigateTo('/login')\n  }\n})\n",
+      "type": "registry:file",
+      "target": "server/middleware/is-authenticated.ts"
+    },
+    {
+      "path": "registry/default/clients/nuxtjs/server/api/profile.get.ts",
+      "content": "import { createError, defineEventHandler } from 'h3';\nimport { createSupabaseServerClient } from '../supabase/client';\n\nexport default defineEventHandler(async (event) => {\n  // Create Supabase SSR client\n  const supabase = createSupabaseServerClient(event)\n\n  // Example: get user session\n  const {\n    data: { user },\n  } = await supabase.auth.getUser();\n\n  if (!user) {\n    return { error: 'Not authenticated' };\n  }\n\n  // Fetch profile row\n  const { data, error } = await supabase\n    .from('profiles')\n    .select('*')\n    .eq('id', user.id)\n    .single();\n\n  if (error) {\n    throw createError({ statusCode: 500, statusMessage: error.message });\n  }\n\n  return { profile: data };\n});\n",
+      "type": "registry:file",
+      "target": "server/api/profile.get.ts"
+    },
+    {
+      "path": "registry/default/clients/nuxtjs/server/supabase/client.ts",
+      "content": "import { createServerClient } from '@supabase/ssr'\nimport { getCookie, setCookie, deleteCookie, H3Event, EventHandlerRequest } from 'h3'\n\nexport const createSupabaseServerClient = (event: H3Event<EventHandlerRequest> | undefined) => {\n  return createServerClient(\n    process.env.NUXT_PUBLIC_SUPABASE_URL!,\n    process.env.NUXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY!,\n    {\n      cookies: {\n        get: (key) => getCookie(event!, key),\n        set: (key, value, options) => setCookie(event!, key, value, options),\n        remove: (key, options) => deleteCookie(event!, key, options),\n      },\n    }\n  )\n}",
+      "type": "registry:file",
+      "target": "server/supabase/client.ts"
+    }
+  ],
+  "envVars": {
+    "NUXT_PUBLIC_SUPABASE_URL": "",
+    "NUXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY": ""
+  },
+  "docs": "You'll need to set the following environment variables in your project: `NUXT_PUBLIC_SUPABASE_URL` and `NUXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY`."
+}

apps/ui-library/public/r/supabase-client-vue.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "supabase-client-vue",
+  "type": "registry:lib",
+  "title": "Supabase Client for Vue",
+  "description": "",
+  "dependencies": [
+    "@supabase/supabase-js@latest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "registry/default/clients/vue/lib/supabase/client.ts",
+      "content": "/// <reference types=\"vite/types/importMeta.d.ts\" />\nimport { createClient as createSupabaseClient } from '@supabase/supabase-js'\n\nexport function createClient() {\n  return createSupabaseClient(\n    import.meta.env.VITE_SUPABASE_URL!,\n    import.meta.env.VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY!\n  )\n}\n",
+      "type": "registry:lib"
+    }
+  ],
+  "envVars": {
+    "VITE_SUPABASE_URL": "",
+    "VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY": ""
+  },
+  "docs": "You'll need to set the following environment variables in your project: `VITE_SUPABASE_URL` and `VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY`."
+}

apps/ui-library/types/nav.ts

@@ -1,4 +1,4 @@
-type supportedFrameworks = 'nextjs' | 'react-router' | 'tanstack' | 'react'
+type supportedFrameworks = 'nextjs' | 'react-router' | 'tanstack' | 'react' | 'vue' | 'nuxtjs'
 export interface NavItem {
   title: string
   href?: string