Simple and lightweight Vue 3 modal library

Vue Modal

Simple and lightweight Vue 3 modal library. WIP

Installation

Register plugin in the main file and import bundle.css:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { VueModal } from 'vue-modal'
import 'vue-modal/bundle.css'

const app = createApp(App)
app.use(VueModal)
app.mount('#app')

Usage

1. Composition API

import { defineComponent, getCurrentInstance, ref } from 'vue'

export default defineComponent({
  name: 'App',
  setup() {
    const modal = instance.appContext.config.globalProperties.$modal
    const counter = ref(0)
    const hideModal = (id) => {
      modal.hide(id)
    }
    const showModal = () => {
      counter.value++
      modal({ // or modal.show
        id: counter.value,
        title: `Modal #${counter.value}`,
        content: `Lorem Ipsum`,
        timeout: 7000
      })
    }
    return {
      showModal,
      hideModal
    }
  }
})

2. Options API

export default {
  name: 'App',
  data: () => ({
    counter: 0
  }),
  methods: {
    hideModal(id) {
      this.$modal.hide(id)
    },
    showModal() {
      this.counter++
      this.$modal({ // or this.$modal.show
        id: this.counter,
        title: `Modal #${this.counter}`,
        content: `Lorem Ipsum`,
        timeout: 7000
      })
    }
  }
}

Styling

This plugin uses BEM methodology for naming classes.

There are 4 blocks. Blocks name is the same as a component using it:

• VModal

• VModalCloseButton

• VModalContainer

• VModalContent

Download Details:

Author: alexeyshilyaev

Source Code: https://github.com/alexeyshilyaev/vue-modal

#vue #vuejs #javascript