how to integrate other Vue UI components within the dialog control

[ThreeGo]

I saw the example below.

https://ej2.syncfusion.com/vue/demos/#/material3/dialog/components-dialog.html

how to integrate other Vue UI components within the dialog control if it is not global component.

<script setup>
import TabTemplateVue from"./tab-template-vue.vue";
...

function contenttemplateVue () { return { template : TabTemplateVue }

}
</script>

[Kokila Poovendran]

Hi ThreeGo,

Greetings from Syncfusion support!

Thank you for reaching out with your inquiry about integrating other Vue UI components within the dialog control. We've reviewed your requirement and have prepared a demonstration on our Syncfusion demo site to assist you further.

You can explore the demo showcasing how to integrate other Vue UI components within the dialog control by following this link: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/dialog/components-dialog.html

Moreover, we've also provided a sample on StackBlitz for your reference:  https://stackblitz.com/edit/qh4nzi-vqk3ew?file=src%2Ftab-template-vue.vue

Please take a look at these resources, and if you have any further requirements or concerns, don't hesitate to let us know. We're here to assist you with any additional support you may need.

[ThreeGo]

Thank you for your support.

But my question is how to use it without registering it as a global component.

var externalTemplate = app.component('tab-template-vue', TabTemplateVue);

Is it possible to use it without registering it as a global component like in the example you sent?

[Kokila Poovendran]

Hi ThreeGo,

Regarding your query about using a Vue component without registering it as a global component, you can indeed achieve this functionality using Vue's "v-slot" template directive. This directive allows you to include custom content within your dialog component without the need for global registration.

In the provided code snippet, we have demonstrated how you can utilize the "v-slot" directive to render another Vue component inside the dialog content. By defining the template within the dialog component and using the "contentTemplate" slot, you can dynamically include your desired content.

Here's a breakdown of the key parts of the code:

<ejs-dialog

        :buttons="dlgButtons"

        ref="dialogObj"

        :header="header"

        :animationSettings="animationSettings"

        :content="'contentTemplate'"

        showCloseIcon="true"

        :target="target"

        width="500px"

        :open="dialogOpen"

        :close="dialogClose"

      >

        <template v-slot:contentTemplate>

          <div id="container">

            <ejs-tab id="element">

              <e-tabitems>

                <e-tabitem

                  :header="headerText0"

                  :content="content0"

                ></e-tabitem>

                <e-tabitem

                  :header="headerText1"

                  :content="content1"

                ></e-tabitem>

                <e-tabitem

                  :header="headerText2"

                  :content="content2"

                ></e-tabitem>

              </e-tabitems>

            </ejs-tab>

          </div>

        </template>

      </ejs-dialog>

 

Sample: https://stackblitz.com/edit/6uofda-rwxbby?file=src%2FApp.vue,src%2Fmain.js

By following this approach, you can dynamically render content within your dialog component without needing to register it as a global component.

For more detailed information on using the "v-slot" directive, please refer to the documentation link provided: Vue Slot Template Documentation.

If you have any further questions or need additional assistance, please feel free to reach out. We're here to help.