JsonLD.ioJsonLD.io

Vue

Add JsonLD.io to your Vue.js application.

Vite + Vue 3

Add the script to your index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue App</title>

    <!-- JsonLD.io Script -->
    <script async src="https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
</body>
</html>

Vue CLI

For Vue CLI projects, add to public/index.html:

<head>
    <!-- Other head elements -->
    <script async src="https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js"></script>
</head>

Using @vueuse/head

If you use @vueuse/head for head management:

<script setup>
import { useHead } from '@vueuse/head'

useHead({
    script: [
        {
            src: 'https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js',
        },
    ],
})
</script>

Nuxt 3

For Nuxt 3 applications, add to nuxt.config.ts:

export default defineNuxtConfig({
    app: {
        head: {
            script: [
                {
                    src: 'https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js',
                },
            ],
        },
    },
})

Or use the useHead composable in a layout or page:

<script setup>
useHead({
    script: [
        {
            src: 'https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js',
        },
    ],
})
</script>

Single Page Applications

The JsonLD.io script handles client-side navigation automatically. It detects URL changes and serves the appropriate schema for each page.

Environment Variables

Store your token securely:

VITE_JSONLD_TOKEN=your_token_here

Use in your config:

{
    src: `https://jsonld.io/api/jsonld/${import.meta.env.VITE_JSONLD_TOKEN}?format=js`
}

Verification

  1. Start your Vue development server
  2. Open the page in a browser
  3. View the page source or use DevTools
  4. Confirm the JSON-LD script is present
ReactNext.js