Embed cincopa gallery in vue project

Cincopa embed code can be easily integrated to any project.

To start using embed code in vue project must be included runtime library to the project and then call cincopa.boot_gallery method

cincopa.boot_gallery accept 3 params

/**
*
* @param {object} loadObject - { 
*   "_object": "ID of the Element where to append or HTML DOM Element" ( required )
*   "_fid": "Gallery FID" ( required )
*   "_editor": "Editor Object" (optional)
*   }
*
*/
cincopa.boot_gallery = function(loadObject){
..........
}

Here is example of vue component where used cincopa.boot_gallery method.

<template>
    <div
        ref="embedRef"
        class="galleryDemo cincopa-fadein"
    ></div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
    props: ['rid'],
    setup(props) {
        const embedRef = ref(null);
      
        function renderEmbedCode(activeEditor) {
          /* rid of assets can be passed as a prop to the component */
            cincopa.boot_gallery({
                _object: embedRef.value,
                _fid: 'A4HAcLOLOO68!' + props.rid 
            });
        }
        onMounted(() => {
            renderEmbedCode();
        });
        window.cincopa.registeredFunctions.push({
            func: function (name, data, gallery) {
                switch (name) {
                    case 'runtime.on-args':
                        /* change gallery args*/
                        gallery.args.iframe = false;
                        break;
                    case 'skin.load':
                        /* do something when skin loaded */
                        break;
                    case 'video.load': 
                        p/* do something on video lokad */
                        break;
                    
                
            },
            filter: '*',
        });
        return {
            embedRef,
        };
    },
};
</script>

Inline Editor

To the cincopa.boot_gallery can be passed also 3rd param with editor object and it will activate inline video editor.
To learn more about Inline Editor functionality you can check this article