Settings

Register the settings of content that will use in template and allow user to change the value. It shows in the tab "Content" of left-side when edit an element.

Template

You can call the settings value in template via data.settings.name

Element.vue

<template>
    <div ref="wrapper">
        <h1>{{ data.settings.title }}</h1>
    </div>
</template>

Register settings via a computed

The settings are the configurations on the left side of the editor. It helps the user to change the values of element's configuration.

Element.vue

<template>
    <div ref="wrapper">
        <h1>{{ data.settings.title }}</h1>
    </div>
</template>

<script>
    export default {
        
        name: 'ElementName',
        
        props: {
            'data': {
                type: Object,
                default () {
                    return {};
                }
            }
        },

        computed: {
            settings() {
                return [{
                  group_name: 'The name of group',
                  params: [{
                      label: 'Title content',
                      name: 'title',
                      type: 'text' 
                  }]  
                }];
            }
        }
        
    }
</script>