Skip to main content
Version: v3

ModalConfig

Configuration object for opening a modal.

Properties​

closeOnClickOutside?​

optional closeOnClickOutside?: boolean;

Determines if clicking outside the modal will close it. Defaults to true. Set this to false to prevent closing via outside clicks.

Example:

closeOnClickOutside: false

props?​

optional props?: Record<string, any>;

Props to pass directly to the component rendered inside the modal.

Example:

props: { title: 'Hello Modal', isVisible: true }

Props can include callback functions to be invoked when confirming a modal.

Example with a callback function:

import { useShell } from '@shell/apis';
import MyCustomModal from './MyCustomModal.vue';

const shell = useShell();

function myAction() {
  console.log('Performed an action');
}

function showModal() {
  shell.modal.open(MyCustomModal, {
    props: { onConfirm: myAction }
  });
}
const props = defineProps<{ onConfirm: () => void }>();
const emit = defineEmits<{ close: [] }>();

function confirm() {
  props.onConfirm();
  emit('close');
}

resources?​

optional resources?: any[];

Array of resources that the modal component might need. These are passed directly into the modal's resources prop.

Example:

resources: [myResource, anotherResource]

width?​

optional width?: string;

Custom width for the modal. Defaults to 600px. The width can be specified as a string with a valid unit (px, %, rem, etc.).

Examples:

width: '800px' // Width in pixels
width: '75%'   // Width as a percentage