Skip to content
Get help on SlackWatch Sanity demo

How to translate a local url placed inside a content block into a correct nuxt-link or routerlink?

2 replies
Last updated: Nov 16, 2020
Anyone knows how to translate a local url placed inside a content block into a correct nuxt-link or routerlink in a vue/nuxt project?
Nov 16, 2020, 3:59 PM
user S
have a look at this component . you can add a serializer for links, looking something like this:

serializers: {
        types: {
          // ...
        },
        // serialize link:
        marks: { link: LinkSerializer },
      }
serializers translate portable text into your own components.

in 
LinkSerializer
, you can add 
nuxt-link
, or use any link component that you have set up
Nov 16, 2020, 4:07 PM
Done, here is my component, for those in the needs:
<template>
  <nuxt-link :to="href" v-if="checkIfLocal"><slot /></nuxt-link>
  <a :href="href" v-else><slot /></a>
</template>

<script>
export default {
  props: ["href"],
  computed: {
    checkIfLocal() {
      if (this.href.startsWith("/")) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>

Nov 16, 2020, 4:40 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Was this answer helpful?

Categorized in