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

Add Scrolling

The Popup component always displays a native scrollbar when the height of the Popup's content is greater than that of the Popup.

You can also implement a scrollbar that belongs to the ScrollView component. This implementation is more flexible. For example, you can enable right-to-left representation or scroll the content to a specific position. For more information about the available options, refer to the ScrollView API section.

To implement this solution, follow the steps below:

  1. Wrap the content in the ScrollView component and place it in the Popup container.

  2. Set the height and width of the ScrollView to 100% of the popup content area.

App.vue
  • <template>
  • <div id="app-container">
  • <DxPopup ... >
  • <template #content>
  • <DxScrollView
  • height="100%"
  • width="100%">
  • <!-- ... -->
  • </DxScrollView>
  • </template>
  • </DxPopup>
  • <!-- ... -->
  • </div>
  • </template>
  •  
  • <script>
  • // ...
  • import { DxScrollView } from "devextreme-vue/scroll-view";
  •  
  • export default {
  • // ...
  • components: {
  • // ...
  • DxScrollView
  • }
  • }
  • </script>