Nuxt

Get started with integrating Mosaic into your Nuxt project.

Step 1

In your Nuxt App, use useHead composable in your index page

// pages/index.vue
<script setup>
useHead({
  meta: [
    {
      property: 'og:image',
      content: 'https://mosaicimg.com/use?url=yourwebsite.com/your_slug'
    },
    {
      property: 'og:title',
      content: 'Your Homepage Title'
    },
    {
      property: 'og:description',
      content: 'Your homepage description'
    }
  ]
})
</script>

Step 2

For dynamic pages:

// pages/blog/[slug].vue
<script setup>
const route = useRoute()

const { data: post } = await useFetch(`/api/posts/${route.params.slug}`)

useHead({
  meta: [
    {
      property: 'og:image',
      // Using dynamic OG image based on the post
      content: 'https://mosaicimg.com/use?url=yourwebsite.com/${route.params.slug}'
    },
    {
      property: 'og:title',
      content: post.value?.title
    },
    {
      property: 'og:description',
      content: post.value?.description
    }
  ]
})
</script>

Step 3

Remember to replace the placeholder value (like 'yourwebsite.com' and 'your_slug') with your actual website URL and slug.