Open silvio-e opened 5 years ago
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)
@mornir have you tried to lzyload markers and types? i'm trying to get this working
No, sorry I haven't. Do you have annotations in portable text that takes time to load?
@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
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.
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.
@mornir Do you have an example of @/components/serializers/externalLink
for example?
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?