useCraftSeoMatic
Learn how to use the useCraftSeoMatic composable.
This composable adds a useAsyncData wrapper to get seoMatic data from the seoMatic API endpoints.
Usage
const { data, error } = useCraftSeoMatic()
This will automatically detect your current site and uri to query
seoMatic data from the /actions/seomatic/meta-container/all-meta-containers endpoint.
Use queried data
The composable just returns the title, meta, link and jsonLd tags.
Therefore you need to use useHead to set the queried data.
A full example might look like this:
const { data, error } = useCraftSeoMatic() // query the seodata
if (error.value) {
console.error(error.value)
}
// make things reactive
const title = computed(() => data.value?.title ?? '')
const meta = computed(() => data.value?.metaTags ?? [])
const link = computed(() => data.value?.linkTags ?? [])
const jsonLd = computed(() => data.value?.jsonLd ?? {})
// use data with useHead
useHead({
title,
meta,
link,
script: [
{
type: 'application/ld+json',
innerHTML: jsonLd,
},
],
})
Read more about that endpoint in the official seomatic docs.
Custom Url
You can also provide your own API url to query the things you need.
const { baseUrl } = config.public.craftcms
const apiUrl = `${baseUrl}meta-container-api-endpoints?asArray=true&uri=/`
const { data, error } = useCraftSeoMatic(apiUrl)
Usage in app.vue
If you want to set the SEO tags in the app.vue, you need to watch the route for client side navigation.
This is actually expected behavior from nuxt and not reccomended as it destroys the cache everytime you use client side navigation.
You can do that by using the watch option from useAsyncData.
const page = useRoute()
const { data: seoData, error } = useCraftSeoMatic(undefined, {
watch: [page],
})
To see all the available options please refer to the official useAsyncData docs.
Type
function useCraftSeoMatic<T = TransformedSeoData>(
url?: string,
options: AsyncDataOptions<T> = {}): CraftSeoMaticReturn<T>
type TransformedSeoData = {
title: string
metaTags: Array<{
hid: string
name?: string
property?: string
content?: string
}>
linkTags: Array<{
rel: string
href: string
hreflang?: string
}>
jsonLd: Record<string, unknown>
}
interface CraftSeoMaticReturn<T> extends Promise<{
data: Ref<T | null>
error: Ref<Error | null>
pending: Ref<boolean>
refresh: () => Promise<void>
}> {
data: Ref<T | null>
pending: Ref<boolean>
refresh: () => Promise<void>
error: Ref<Error | null>
}