de-duplicate `<link rel="canonical">`

[danielroe]

similar to https://github.com/vueuse/head/issues/32, we can deduplicate canonical links....

[oritwoen]

Is there any way around it? It causes quite a lot of problems ...

[kakajansh]

Is there any way around it? It causes quite a lot of problems ...

Could you find a way?

[kakajansh]

Until the issue is resolved, this is how we remove manually: In layout file

const route = useRoute();
const baseUrl = useRuntimeConfig().public.baseUrl;

// Remove duplicate 
function removeDuplicateCanonical(route) {
  nextTick(() => {
    document.head.querySelectorAll('link[rel="canonical"]').forEach((el) => {
      if (el.getAttribute('href') !== baseUrl + route.fullPath) el.remove()
    }) 
  })
}

// remove on route change
watch(route, (value) => removeDuplicateCanonical(value))

// remove on mount 
onMounted(() => removeDuplicateCanonical(route))

// add canonical
useHead({
  link: [{
      rel: 'canonical',
      href: computed(() => baseUrl + route.fullPath)
  }],
})

[harlan-zw]

This is resolved https://github.com/vueuse/head/commit/200f1ca1417a13a265bee45289a84ad31cf87d2b