Skip to main content

​
Nuxt / Vue SSR

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

​
Install

npm install @instantschema/sdk

​
Setup

​
1. Create the composable

// 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

<!-- 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.
For auto-detection, add data-instantschema="1" to each rendered script tag:
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.