Vue3 Simple Modal

vue3-simple-modal is very simple and light-weight modal library for vue3.

It was based on vue3, typescript and composition API with setup.

Setup

npm i @devsun/vue3-simple-modal

Add dependencies to your main.ts:

import import Vue3SimpleModal from '@devsun/vue3-simple-modal';
// style
import '@devsun/vue3-simple-modal/style.css';

const app = creatApp({...});
app.use(Vue3SimpleModal);

Usage

use Composition API style:

const $modal = inject('$modal');

$modal.open({
  component: () => import('@/components/yourModalComponent.vue'),
  options: {
    id: 'BasicModal',
    title: 'Vue3 simpl modal 😉',
    width: '500px',
  },
});

with Typescript:

import { IModal } from '@devsun/vue3-simple-modal';

const $modal = <IModal>inject('$modal');
...

Props & Emits

In Parent component:

const $modal = inject('$modal');

$modal.open({
  component: () => import('@/components/yourModalComponent.vue'),
  options: {
    id: 'BasicModal',
    title: 'Vue3 simpl modal 😉',
    width: '500px',
  },
  bind: {
    key: value,
  },
  on: {
    refresh: () => {
      console.log('wow! refresh it!');
    },
  },
});

In Modal component:

// You can use the data that's passed through `bind` as  props.
const props = defineProps({
  key: {
    type: String,
    default: 'Undefined key props!',
  },
});

// You can use `emits` to invoke events provied by the parent component.
const emits = defineEmits(['refresh']);

function someFunction() {
  emits('refresh');
}

Close modal in Modal component:

You don't need to add anything from the parent component.

Just emits close

const emits = defineEmits(['close']);

function handleClick() {
  emits('close');
}

Properties

| Name | Type | Default | Description | | --------- | -------------------- | ------- | ------------------------------ | | component | Func | | () => import('compoennt path') | | options | IDynamicModalOptions | | | | bind | Object | | Use as props In modal | | on | Object | | Use as emits In modal |

IDynamicModalOptions

| Name | Type | Default | Description | | ------------ | ---------------- | ------- | ----------- | | id | String | | Required | | title | String | | Required | | width | String | Number | 500px | | | height | String | Number | auto | | | clickToClose | Boolean | true | |

API

open

$modal.open({
  component: () => import('@/components/yourModalComponent.vue'),
  options: {
    id: 'BasicModal',
    title: 'Vue3 simpl modal 😉',
  },
  bind: {
    key: value,
  },
  on: {
    refresh: () => {
      console.log('wow! refresh it!');
    },
  },
});

close

$modal.close('Your Modal Id');

Plugin Options

Configure the plugin using an global options:

app.use(Vue3SimpleModal, {
  // provide / inject with this key.
  key: '$popup',

  // close when clicked dim layer
  clickToClose: false,
});