rdunk / sanity-blocks-vue-component

[DEPRECATED] Vue component for rendering block content from Sanity
MIT License
71 stars 10 forks source link

Simple example for Nuxt 3 open link in new window #34

Open MetaBureau opened 2 years ago

MetaBureau commented 2 years ago

Reading here (https://sanity.nuxtjs.org/helpers/portable-text) I see:

marks: {
    // You can also just pass a string for a custom serializer if it's an HTML element
    internalLink: 'a'
  }

Is anyone able to provide a simple example of opening links in a new window for Nuxt 3 please? I'm imagining something like:

marks: {
    // You can also just pass a string for a custom serializer if it's an HTML element
    link: 'a', target:_blank'
  } 
joserocha3 commented 1 year ago

@MetaBureau you probably figured this out by now, but in case someone else needs it this is how it is done:

Custom Block component with serializers:

<script setup>
import Link from '~/components/blocks/link.vue'

const props = defineProps({
  blocks: Array,
})

const serializers = {
  marks: {
    link: Link,
  },
}
</script>

<template>
    <SanityContent :blocks="blocks" :serializers="serializers" />
</template>

Here is ~/components/blocks/link.vue:

<template>
  <NuxtLink target="_blank">
    <slot />
  </NuxtLink>
</template>