Global configration for serializers

[silvio-e]

I'm thinking of having a global configration regarding serializers in Nuxt.js projects.

As we are going to use the block component on so many pages I would like to make the component globally available so we don't have to import it in hundreds of pages.

In addition I would like to define "global" serializers which should be available everywhere and we wouldn't need to add a serializers object in all of these pages.

Do you have an idea or suggestion how I could achieve that?

[mornir]

Hi! In Nuxt, you can already define components globally: https://github.com/nuxt/nuxt.js/issues/421

In my case, I have a RichText.vue component:

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

<script>
import PortableText from 'sanity-blocks-vue-component'
import externalLink from '@/components/serializers/externalLink'
import internalLink from '@/components/serializers/internalLink'
import imageGallery from '@/components/serializers/imageGallery'
import pdfLink from '@/components/serializers/pdfLink'

export default {
  components: {
    PortableText,
  },
  props: {
    blocks: {
      type: Array,
      default: () => [],
      required: true,
    },
  },
  data() {
    return {
      serializers: {
        marks: {
          externalLink,
          internalLink,
          recipeLink: internalLink,
          pdf: pdfLink,
        },
        types: {
          gallery: imageGallery,
        },
      },
    }
  },
}
</script>

That I defined as a global component:

import Vue from 'vue'
import RichText from '@/components/FlexContent/RichText'

Vue.component('RichText', RichText)

[podlebar]

@mornir have you tried to lzyload markers and types? i'm trying to get this working

[mornir]

No, sorry I haven't. Do you have annotations in portable text that takes time to load?

[podlebar]

@mornir no but image slider, videoplayer or audioplayer.. they are only used in 1% of the articles i have.. idea was to shrink the initial bundlesize

[baydiwo]

Hi @mornir may I know how you processing image in ImageGallery component, are you using ssr: true? I got stuck with processing image and video in functional component.

[mornir]

hey! There are known bugs with functional components with v0.1.0. These bugs were fixed in v1.0, which only works with Vue 3. If I were you, I would use a normal Vue component instead.

[richgcook]

@mornir Do you have an example of @/components/serializers/externalLink for example?