Easy to use, highly customizable Vue.js modal library.

Last update: Jun 25, 2022

Vue.js modal

Easy to use, highly customizable Vue.js modal library.

😎 Examples

🤓 Documentation

🤖 Changelog

🙌 Looking for maintainers

💰 Sponsorship

npm version npm npm

⚠️ ⚠️ ⚠️ 2.0.0-rc.X version:

Version 2.0.0 release candidates will have breaking changes until it is 2.0.1. If you need a more stable version, please use 1.3.34.

If you notice any bugs or regressings please do not hesitate to report any issues.

screen shot 2018-03-01 at 10 33 39


Sponsorship & support

If you are using this project please consider sponsorting it's further development & bug fixes

Links: https://github.com/sponsors/euvl, https://www.buymeacoffee.com/yev

This library is contributor-driven

This library is contributor-driven. It is not backed by any company, which means that all contributions are voluntary and done by the people who need them. If you need something improved, added, or fixed, please contribute it yourself. Please keep in mind that maintainers volunteer their free time to work on this project and have no obligation to reply on the issues, tailor library for specific use-cases or perform customer support.

Other projects

Check out my other projects:

GitHub

https://github.com/euvl/vue-js-modal
Comments
  • 1. 2.0.0-rc.3 not working in NuxtJS

    Problem:

    2.0.0-rc.3 version not working in NuxtJS

    Version:

    2.0.0-rc.3

    Example & screenshots:

    Plugin:

    import Vue from 'vue';
    import VModal from 'vue-js-modal/dist/ssr.index';
    import 'vue-js-modal/dist/styles.css';
    
    Vue.use(VModal, {
        dialog: true,
        dynamic: true,
        injectModalsContainer: true,
        dynamicDefaults: {
            adaptive:true,
            scrollable:true,
            height:"auto",
        }
    });
    

    Code:

     this.$modal.show({
                            render(h) {
                                return h(bookForm, {
                                    props: {
                                        SCOffer: vm.SCOffer,
                                    },
                                    on: {
                                        done() {
                                            vm.$modal.hide('bookForm');
                                        },
                                    }
                                });
                            }
                        }, {
                        
                        },
                        {
                            name: "bookForm",
                            adaptive: false,
                            scrollable: false,
                            height: "100%",
                            width: "100%",
                            minWidth:"100%",
                            minHeight:"100%",
                            pivotX:0,
                            pivotY:0,
                        }
                    );
    

    Errors: Screenshot_144

    Reviewed by mrFANRA at 2020-05-16 09:38
  • 2. Set width and height as div/parent/window percentage?

    Hi. I'd like to set the width and height of the modal in a more dynamic/responsive way. Would it be possible to set the values as percentage of something (probably window size)?

    Reviewed by onekiloparsec at 2017-07-06 12:32
  • 3. Listening on events emitted by dynamic modal

    A dynamic modal that we use emits a 'customEvent' on certain action. Can we listen to this event while initializing the modal ?

    Example:

     this.$modal.show(CustomComponent, {message: 'Hello'}, {height: 'auto'});
    

    The CustomComponent emits an event that we want to bind to. What is the best way to achieve it ?

    Reviewed by vaishnavi-prabakar at 2018-03-06 09:31
  • 4. How to restore page scroll when using scrollable modal? [fixed in 1.3.8]

    Hi! Is it possible to restore page scroll when modal with scrollable enabled property closed? It seems that the modal resets page scroll to 0 when it opens in scrollable mode. Without scrollable=true it's ok, page scroll is not affected.

    Reviewed by mvkasatkin at 2017-12-11 12:26
  • 5. Show modal but not have it scroll to the top of page

    Is it possible (or are there future plans) to show the modal but not have it scroll back to the top of the page?

    For instance, I have a list of items. The user can open the details of an item via modal. If they want to see the details for an item that is at the bottom of the list, the modal opens but it scrolls to the top to display it.

    Reviewed by jennapederson at 2017-08-21 17:04
  • 6. Default options

    Something like that:

    // ...
    Vue.use(VueModal, {
      componentName: 'foo-modal',
      width: '80%',
      clickToClose: false
    })
    // ...
    

    The properties should overwrite default options:

    <!-- // Modal 'Bar' -->
    <foo-modal name="bar" width="50%" :clickToClose="true">
    <!-- ... -->
    </foo-modal>
    
    <!-- // Modal 'Baz' -->
    <foo-modal name="baz" width="75%">
    <!-- ... -->
    </foo-modal>
    

    What do you think?

    Reviewed by ciceropablo at 2017-08-01 21:51
  • 7. height="auto" wrong top position

    For some reason, it sets a wrong top value (bigger than needed) so modal is not centered correctly. I use height="auto" and :scrollable="true" I don't have any other css which can impact this modal window position

    image

    Any ideas what can it be?

    Reviewed by Archiolidius at 2017-08-10 15:32
  • 8. Vue-js-modal has errors when using Jest

    Problem:

    When I use the dynamic modal and I register it as a global component with Vue.use(VModal, {dynamic: true}), all my tests that contains a modal fail because of key.charAt is not a function error. I tried it also with createrLocalVue from vue-test-utils but it didn't help. If I comment out the VModal registration, all my tests pass. ...

    Example & screenshots:

    It is one of the failing tests:

    import sinon from 'sinon'
    import Vue from 'vue'
    import Vuex from 'vuex'
    import i18n from '@/localization'
    import { mount } from '@vue/test-utils'
    import filters from '@/filters'
    import TemplateModal from '@/components/molecules/TemplateModal'
    import LineSelect from '@/components/atoms/LineSelect'
    
    Vue.use(Vuex)
    
    describe('TemplateModal.vue', () => {
      let wrapper
      let getters
      let store
      let actions
      const template = {
        Name: 'Fancy template',
        Description: 'This is a fancy template',
      }
    
      beforeEach(() => {
        actions = {
          'protocol/addProtocol': jest.fn(),
          'tasks/getTaskListByStatus': jest.fn(),
          'status/setStatusMessage': jest.fn(),
          'protocol/fetchTasks': jest.fn()
        }
        getters = {
          'users/userList': () => {
            return [
              {
                UserId: 1,
                DisplayName: 'Admin'
              },
              {
                UserId: 2,
                DisplayName: 'Manager'
              }
            ]
          },
          'auth/loginData': () => {
            return {
              UserId: 1
            }
          }
        }
    
        store = new Vuex.Store({
          getters,
          actions
        })
    
        wrapper = mount(TemplateModal, {
          propsData: {
            template,
            position: 1
          },
          store,
          i18n
        })
      })
    
      it('TemplateModal should be a Vue instance and should have a div root element with the class "ca-template-modal"', () => {
        expect(wrapper.isVueInstance()).toBe(true)
        expect(wrapper.is('div')).toBe(true)
        expect(wrapper.classes()).toContain('ca-template-modal')
      })
    
      it('TemplateModal should create as many starter options as many users we have and the options should have the correct data', () => {
        expect(wrapper.find('select[name="starter"]').findAll('option').length).toBe(getters['users/userList']().length)
        expect(wrapper.find('select[name="starter"]').find('option').text()).toBe(getters['users/userList']()[0].DisplayName)
        expect(wrapper.find('select[name="starter"]').find('option').element.value).toBe(getters['users/userList']()[0].UserId.toString())
      })
    
      it('TemplateModal has two LineSelect children', () => {
        expect(wrapper.findAll(LineSelect).length).toBe(2)
      })
    
      it('TemplateModal button click should trigger the corresponding handler method and the store action', () => {
        wrapper.find('.ca-template-modal__submit').trigger('click')
        expect(actions['protocol/addProtocol']).toBeCalled()
        const spy = sinon.stub(wrapper.vm, 'addTask').returns('called')
        wrapper.find('.ca-template-modal__submit').trigger('click')
        expect(wrapper.vm.addTask()).toEqual('called')
        spy.restore()
      })
    })
    

    It fails always when mounting the wrapper, the stacktrace is here:

    TypeError: key.charAt is not a function
    
          52 |     })
          53 |
        > 54 |     wrapper = mount(TemplateModal, {
          55 |       propsData: {
          56 |         template,
          57 |         position: 1
    
          at Object.has (node_modules/vue/dist/vue.common.js:1932:50)
          at baseGetTag (node_modules/@vue/test-utils/dist/vue-test-utils.js:448:48)
          at baseClone (node_modules/@vue/test-utils/dist/vue-test-utils.js:5047:15)
          at node_modules/@vue/test-utils/dist/vue-test-utils.js:5086:31
          at arrayEach (node_modules/@vue/test-utils/dist/vue-test-utils.js:4304:9)
          at baseClone (node_modules/@vue/test-utils/dist/vue-test-utils.js:5080:3)
          at node_modules/@vue/test-utils/dist/vue-test-utils.js:5086:31
          at arrayEach (node_modules/@vue/test-utils/dist/vue-test-utils.js:4304:9)
          at baseClone (node_modules/@vue/test-utils/dist/vue-test-utils.js:5080:3)
          at node_modules/@vue/test-utils/dist/vue-test-utils.js:5086:31
          at arrayEach (node_modules/@vue/test-utils/dist/vue-test-utils.js:4304:9)
          at baseClone (node_modules/@vue/test-utils/dist/vue-test-utils.js:5080:3)
          at cloneDeep (node_modules/@vue/test-utils/dist/vue-test-utils.js:5116:10)
          at node_modules/@vue/test-utils/dist/vue-test-utils.js:5141:11
              at Array.forEach (<anonymous>)
          at createLocalVue (node_modules/@vue/test-utils/dist/vue-test-utils.js:5137:20)
          at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:5375:38)
          at Object.<anonymous> (test/unit/specs/molecules/TemplateModal.spec.js:54:15)
    

    ...

    I have checked stackoverflow for solutions and 100% sure that issue not in my code.

    Reviewed by matewiszt at 2018-06-21 08:10
  • 9. Scrollable not working when dynamic content in modal is rendered after opening modal

    Problem:

    I have a modal which has 2 Vue components inside that depend on API calls. So nothing is rendered initially but after a few milliseconds the API returns the correct data and the Vue components are rendered. The height of the modal adapts to this new content, but a scrollbar isn't triggered.

    Version:

    2.0.0-rc.3

    Code example:

    Vue.use(VModal, { dynamic: true, dynamicDefaults: { clickToClose: false }, injectModalsContainer: true })
    
    this.$modal.show(ProductModal, {
        productId: productId,
        defaultVariantId: variantId
    }, {
        height: "auto",
        width: "90%",
        scrollable: true,
        adaptive: true,
        'max-width': 1200
    });
    

    I have checked stackoverflow for solutions and 100% sure that this issue is not not related to my code.

    Reviewed by TomDeSmet at 2020-05-18 13:29
  • 10. [email protected]" has incorrect peer dependency "[email protected]"

    Reviewed by simonschaufi at 2020-09-18 12:29
  • 11. Ensure that top position is not negative

    Hi @euvl, I faced with next situation: I have a modal with form inside which works well everywhere except mobile browsers, once some field gets focus and keyboard appears - my modal gets negative top position. I've tried to dig a bit and found out that 'resize' even doesn't fire when keyboard appears, so some calculations use an incorrect max height. Not sure that solution in this PR is neatly enough, but it should solve the problem. Thanks,

    Reviewed by viktorhunko at 2019-12-30 12:26
  • 12. Bump node-fetch from 2.6.1 to 2.6.7 in /examples/nuxt

    Bumps node-fetch from 2.6.1 to 2.6.7.

    Release notes

    Sourced from node-fetch's releases.

    v2.6.7

    Security patch release

    Recommended to upgrade, to not leak sensitive cookie and authentication header information to 3th party host while a redirect occurred

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.6...v2.6.7

    v2.6.6

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.5...v2.6.6

    v2.6.2

    fixed main path in package.json

    Commits
    • 1ef4b56 backport of #1449 (#1453)
    • 8fe5c4e 2.x: Specify encoding as an optional peer dependency in package.json (#1310)
    • f56b0c6 fix(URL): prefer built in URL version when available and fallback to whatwg (...
    • b5417ae fix: import whatwg-url in a way compatible with ESM Node (#1303)
    • 18193c5 fix v2.6.3 that did not sending query params (#1301)
    • ace7536 fix: properly encode url with unicode characters (#1291)
    • 152214c Fix(package.json): Corrected main file path in package.json (#1274)
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by endless, a new releaser for node-fetch since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-25 14:11
  • 13. Bump shell-quote from 1.7.2 to 1.7.3 in /examples/nuxt

    Bumps shell-quote from 1.7.2 to 1.7.3.

    Changelog

    Sourced from shell-quote's changelog.

    1.7.3

    • Fix a security issue where the regex for windows drive letters allowed some shell meta-characters to escape the quoting rules. (CVE-2021-42740)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-23 04:17
  • 14. Modal is not scrollable when adaptive is true

      <modal name="clusters-modal"
             :width = '800'
             height="auto"
             :adaptive="true"
             :draggable="true"
             :shiftX="0.6"
             :scrollable="true">
    
     <!---Modal Body -->
    
    Reviewed by edwinsmasher at 2022-06-16 02:37
  • 15. Bump eventsource from 1.1.0 to 1.1.1 in /demo

    Bumps eventsource from 1.1.0 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-01 15:27
  • 16. Bump eventsource from 1.0.7 to 1.1.1

    Bumps eventsource from 1.0.7 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 Stéphane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits
    • aa7a408 1.1.1
    • 56d489e chore: rebuild polyfill
    • 4a951e5 docs: update history for 1.1.1
    • f9f6416 fix: strip sensitive headers on redirect to different origin
    • 9dd0687 1.1.0
    • 49497ba Update history for 1.1.0 (#146)
    • 3a38537 Update history for #136
    • 46fe04e Merge pull request #136 from icy-fish/master
    • 9a4190f Fix issue: reconnection only happends for 1 time after connection drops
    • 61e1b19 test: destroy both proxied request and response on close
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-01 01:05
  • 17. Cannot read properties of undefined (reading '$modal')

    Hi there ! I have inexplicable problem.
    project: laravel 8 & vue 3 and installed vue-js-modal

    yarn add vue-js-modal // installed through this
    

    Problem:

    Cannot read properties of undefined (reading '$modal')

    import {createApp, inject, ref} from 'vue' 
    import routes from './routes'
    import store from "./store/store";    
    import VModal from 'vue-js-modal'
    const app = createApp(App)
    .use(routes)
    .use(store)
    .use(VModal); 
    app.config.globalProperties.$modal = VModal; //and I commented this line 
    app.mount('#app');
    
    

    Version:

    Vue 3

    Example & screenshots:

    image

    Reviewed by encoderuz at 2022-05-14 15:15
Simple and intuitive, highly customizable modal component for Vue.js.
Simple and intuitive, highly customizable modal component for Vue.js.

Transform Vue.js 2.0+ component into modal with powerful layout and transition support

Jan 9, 2022
vue-ya-semantic-modal - Yet another semantic-ui modal component for Vue2 without Jquery but with Vue transition
vue-ya-semantic-modal - Yet another semantic-ui modal component for Vue2 without Jquery but with Vue transition

vue-ya-semantic-modal Yet another semantic-ui modal component for Vue2 without Jquery but with pure Vue transition This component only provide a frame

Jan 20, 2022
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

Vue Final Modal Looking for a Vue 3 version? It's over here ?? Documentation ?? Examples Introduction Vue Final Modal is a renderless component! You c

Jul 4, 2022
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

??Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

Jul 4, 2022
Jenesius vue modal is simple library for Vue 3 only

Jenesius vue modal is simple library for Vue 3 only

Jun 21, 2022
Vue-modally - a component based vue modal library

vue-modally is a component based vue modal library, in a simpler term, it lets you use any vue component as asynchronous/synchronous modal programmatically

Feb 24, 2022
Modal window for vue.js
Modal window for vue.js

Vudal Modal window component based on Semantic UI design. (Does not require semantic ui, it is completely independent) Install plugin import { VudalPl

Jun 28, 2021
A Vue modal with animations.

Vodal A vue modal with animations. Example Installation npm i -S vodal Usage <vodal :show="show" animation="rotate" @hide="show = false"> <div>A

Jun 28, 2022
Vue modal component for Semantic-Ui no jquery
Vue modal component for Semantic-Ui no jquery

Vue-Semantic-Modal Modal component for semantic-ui without jQuery Example Usage <modal v-model="showModal"> <p slot="header">Confirmation needed<

Jan 31, 2022
Vue stackable modal component by Innologica

Stackable modal Stackable modal is a library for modal dialogs which can be stacked by using z-index position. The component uses bootstrap for stylin

Sep 8, 2021
Modal component for Vue

vue-modal A modal window component for Vue vue-modal is designed with web applications in mind and tries to stick as much as possible to the accessibi

Jun 30, 2022
Bootstrap style modal for vue
Bootstrap style modal for vue

vue-bootstrap-modal Bootstrap style modal component for vue. Usage import Bootstrap.css <link href="bootstrap.css"></link> NOTE: By default, the moda

Apr 8, 2022
Bootstrap Modal on Vue component

BootstrapVueModal Bootstrap Modal with Vue component It's a vue component of Bootstrap Modal. Include a slots, that you can override them and write yo

Oct 7, 2020
Vue modal component for Semantic-Ui no jquery
Vue modal component for Semantic-Ui no jquery

Vue-Semantic-Modal Modal component for semantic-ui without jQuery Example Usage <modal v-model="showModal"> <p slot="header">Confirmation needed<

Jan 31, 2022
vue fullpage modal
 vue fullpage modal

vue fullpage modal

Jun 21, 2022
Vue component for creating modal windows using Tailwind CSS.
Vue component for creating modal windows using Tailwind CSS.

Vue component for creating modal windows using Tailwind CSS.

Oct 16, 2021
Build A Custom Modal Component In Vue.js

creating-modal-component Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for produc

Aug 19, 2021
A simple and lightweight Vue (v2) modal component.

@burhanahmeed/vue-modal-2 A simple and lightweight Vue modal component for Vue 2.x. Documentation Docs: https://initbase.github.io/vue-modal-2/ Demo d

Oct 20, 2021
Simple dialog/modal component for Vue 2

v-easy-dialog Simple to use, plug-and-play, and nice defaults out-of-the-box. Demo https://r2xwr.csb.app/ Features Handles Esc button interaction Auto

Nov 16, 2021