> ## Documentation Index
> Fetch the complete documentation index at: https://docs.instantschema.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Nuxt / Vue SSR

> Server-render InstantSchema schemas in Nuxt

# Nuxt / Vue SSR

Use `fetchSchemas` in a composable with `useHead` to inject schemas server-side on every page.

## Install

```bash theme={null}
npm install @instantschema/sdk
```

## Setup

### 1. Create the composable

```ts theme={null}
// composables/useInstantSchema.ts
import { fetchSchemas } from "@instantschema/sdk";

export async function useInstantSchema(projectId: string) {
  const route = useRoute();
  const schemas = await fetchSchemas(projectId, route.path);
  useHead({
    script: schemas.map(s => ({
      type: "application/ld+json",
      innerHTML: JSON.stringify(s),
    })),
  });
}
```

### 2. Call it in your root layout

```vue theme={null}
<!-- app.vue or layouts/default.vue -->
<script setup>
await useInstantSchema("YOUR_PROJECT_ID");
</script>
```

## Detection

Schemas rendered via `useHead` on the server appear in the raw HTML source. The InstantSchema dashboard detects them automatically on the next scan.

<Note>
  For auto-detection, add `data-instantschema="1"` to each rendered script tag:

  ```ts theme={null}
  useHead({
    script: schemas.map(s => ({
      type: "application/ld+json",
      innerHTML: JSON.stringify(s),
      "data-instantschema": "1",
    })),
  });
  ```

  Without this attribute the dashboard cannot distinguish your schemas from other JSON-LD on the page.
</Note>