Simple and lightweight Vue 3 modal library. WIP
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')
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
}
}
})
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
})
}
}
}
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
Author: alexeyshilyaev
Source Code: https://github.com/alexeyshilyaev/vue-modal
#vue #vuejs #javascript