@spatie/blender-content-blocks NPM

Blender Media

Content blocks component for Blender, our CMS.

Installation

The blender-content-blocks can be installed from npm.

yarn add @spatie/blender-content-blocks

blender-content-blocks also requires you to install vue@'^2.0.0', lodash@'^4.0.0', and spatie-dom@'^1.0.0':

yarn add vue@'^2.0.0' lodash@'^4.0.0' spatie-dom@'^1.0.0'

Usage

The canonical way to use blender-content-blocks, is to mount it on a selector. The mount function will replace every element that matches a given selector with a blender-content-blocks component. The element should contain props just like you'd pass them with Vue.

import { mount } from '@spatie/blender-content-blocks';

export default function init() {
    mount('content-blocks');
}

<content-blocks
    collection="default"
    editor="default"
    create-url="/create"
    :model="{ name: 'MyModel', id: 1 }"
    :input="[]"
    :data="{
        locales: ['nl', 'en'],
        contentLocale: 'nl',
        mediaModel: 'App\Models\ContentBlock',
        mediaUploadUrl: '/upload'
    }"
    :debug="false"
></content-blocks>

Custom Fields

Custom fields can be defined by passing types, translatableAttributes or mediaLibraryCollections to data. Here are the default values as a quick reference:

{
    types: {
        imageLeft: 'Afbeelding links',
        imageRight: 'Afbeelding rechts',
    },
    translatableAttributes: {
        name: 'text',
        text: 'redactor',
    },
    mediaLibraryCollections: {
        image: 'image',
    },
}