Create element

This article will show you how to create an element for Beae builder follow the structure of Vue component.

Structure

The main structures that make up an element:

• Template

• Mixins

  • Element

  • Javascript

  • Vendor

  • Liquid

• Props

  • data

• Computed

  • settings (object)

  • style (object)

  • liquids (object)

  • javascript (function)

  • css (string)

Register an element to Element List

/src/components/LeftSide/Elements/ListElements.vue

{
    name: 'Element Title',
    is: 'block',
    icon: 'CollectionIcon',
    // thumbn: '<svg>...</svg>'
    data: {
        name: 'element_name'
        settings: {
            ...
            // The default settings values
        },
        style: {
            ...
            // The default style values
        }
    }
}

Register an element to builder

/src/components/RightSide/Builder/Components/Core/Elements/index.js

export { default as NameElement } from './Base/ElementFile.vue';