Vue Popup - Customize the Content

Specifying the Content Template

The example below shows how to create a template consisting of static (text) and dynamic (the Button UI component) content.

  • <template>
  • <DxPopup
  • v-model:visible="isPopupVisible"
  • title="Popup Title">
  • <template>
  • <p>Static content</p>
  • <DxButton
  • text="Click me"
  • @click="buttonClick"
  • />
  • </template>
  • </DxPopup>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxPopup } from 'devextreme-vue/popup';
  • import { DxButton } from 'devextreme-vue/button';
  •  
  • export default {
  • components: {
  • DxButton
  • },
  • data() {
  • return {
  • isPopupVisible: true
  • };
  • },
  • methods: {
  • buttonClick() {
  • // ...
  • }
  • }
  • }
  • </script>

Switching Templates On the Fly

If you need to render different templates depending on a specific condition, define them inside the Popup container using the DevExtreme dxTemplate markup component. You can switch the templates on the fly by changing the contentTemplate property's value.

  • <template>
  • <div>
  • <DxPopup
  • title="Popup Title"
  • v-model:visible="isPopupVisible"
  • :contentTemplate="currentTemplate">
  • <template #template1>
  • <p>First template</p>
  • </template>
  • <template #template2>
  • <p>Second template</p>
  • </template>
  • </DxPopup>
  • <DxButton
  • text="Change the Template"
  • @click="changeTemplate"
  • />
  • </div>
  • </template>
  •  
  • <script>
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxPopup } from 'devextreme-vue/popup';
  • import { DxButton } from 'devextreme-vue/button';
  •  
  • export default {
  • components: {
  • DxPopup,
  • DxButton
  • },
  • data() {
  • return {
  • isPopupVisible: true,
  • currentTemplate: "template1"
  • };
  • },
  • methods: {
  • changeTemplate () {
  • this.currentTemplate = (this.currentTemplate === 'template1' ? 'template2' : 'template1')
  • }
  • }
  • }
  •  
  • </script>
See Also