chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js

import { createApp } from 'vue';
import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
import { addressMessages } from './i18n';
import App from './App.vue';

const i18n = _createI18n( addressMessages );

let containers = document.querySelectorAll('.address-container');
containers.forEach((container) => {

    const app = createApp({
        template: `<app v-bind:addAddress="this.addAddress" ></app>`,
        data() {
            return {
                addAddress: {
                    context: {
                        target: {
                            name: container.dataset.targetName,
                            id: parseInt(container.dataset.targetId)
                        },
                        edit: container.dataset.mode === 'edit',  //boolean
                        addressId: parseInt(container.dataset.addressId) || null,
                        backUrl: container.dataset.backUrl || null
                    },
                    options: {
                        /// Options override default.
                        /// null value take default component value defined in AddAddress data()
                        button: {
                            text:  {
                                create: container.dataset.buttonText || null,
                                edit: container.dataset.buttonText || null
                            },
                            size: container.dataset.buttonSize || null,
                            displayText: container.dataset.buttonDisplayText !== 'false'  //boolean, default: true
                        },
                        /// Modal title text if create or edit address (trans chain, see i18n)
                        title: {
                            create: container.dataset.modalTitle || null,
                            edit: container.dataset.modalTitle || null
                        },
                        /// Display panes in Modal for step123
                        openPanesInModal: container.dataset.openPanesInModal !== 'false',  //boolean, default: true
                        /// Display actions buttons of panes in a sticky-form-button navbar
                        stickyActions: container.dataset.stickyActions === 'true',  //boolean, default: false
                        /// Use Date fields
                        useDate: {
                            validFrom: container.dataset.useValidFrom === 'true',  //boolean, default: false
                            validTo: container.dataset.useValidTo === 'true'       //boolean, default: false
                        },
                        /// Force redirection after last step (cfr. backUrl)
                        forceRedirect: container.dataset.forceRedirect === 'true',  //boolean, default: false
                        /// Don't display show renderbox Address
                        //hideAddress: false         //boolean, default: false
                    }
                }
            }
        }
    })
    .use(i18n)
    .component('app', App)
    .mount(container);

    //console.log('container dataset', container.dataset);
});