Bitrix Framework

You can find additional details in the Teleport documentation.

Example

Insert the following html code at the page:

<div id="application"></div>
<div style="border: 1px solid red; padding: 5px 10px; margin-top: 20px">
	Outside Vue application
	<div id="outside-content"></div>
</div>

The application block will contain your Vue application, and the block outside-content - location for future teleport landing.

Add the following code in your JS extension:

import {BitrixVue} from 'ui.vue3';

BitrixVue.createApp({
    data: () => ({
        disabled: false,
    }),
    template: `
        <div style="border: 1px solid green; min-height: 5px; padding: 5px 10px">
            <div>Inside the Vue application</div>
            <button @click="disabled = !disabled">Teleport</button> Teleport enabled: {{disabled? 'No': 'Yes'}}
            <div>
                Content below this paragraph is visualized in an external (red) container 
                using the function <b>Vue3 Teleport</b> if teleport is enabled.<br>
                Otherwise is shown here as needed.
                
                <teleport to="#outside-content" :disabled="disabled" >
                    <p style="border: 1px solid #000; padding: 2px 10px">This is content from Vue.</p>
                </teleport>
            </div>
        </div>
    `
}).mount('#application');