Structured Content 2022: Join our conference to explore fresh perspectives on content and digital experiences →

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.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.