vue-editorjs-blocks
Simple editorjs template skeleton based on vue component slots for nuxt
Installation
npm install @whalest/vue-editorjs-htmlUsage
example data
{
"time": 1613989142594,
"blocks": [
{
"type": "paragraph",
"data": {
"text": "Hey. Meet the new Editor. On this page you can see.."
}
}
]
}simple
<EditorBlocks :data="data" class="prose max-w-none" v-once />- if content not changes, use v-once for optimize update performance
customize
<template #image="{ data }">
<editor-blocks-image :data="data">
<div class="overflow-hidden">
<nuxt-picture
:src="data.file.url"
loading="lazy"
:height="data.stretched ? 500 : 600"
:width="data.stretched ? 1280 : 1024"
responsive
:alt="data.caption"
:title="data.caption"
placeholder
class="transition-all ease-linear transform group-hover:scale-110"
></nuxt-picture>
</div>
</editor-blocks-image>
</template>