https://github.com/dimensi/vue-root-modals

Vue modals manager
https://github.com/dimensi/vue-root-modals

Last synced: 2 months ago
JSON representation

Vue modals manager

• Host: GitHub
• URL: https://github.com/dimensi/vue-root-modals
• Owner: dimensi
• License: mit
• Created: 2018-03-03T12:54:28.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2021-05-09T22:56:41.000Z (over 3 years ago)
• Last Synced: 2024-10-04T19:10:11.228Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 910 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-root-modals

A handy promise-based library for modal windows.

## Demo

[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/23774mk51j)

## Install

Via Yarn:

```

yarn add vue-root-modals

```

Via NPM:

```

npm i vue-root-modals

```

## Quick start

vue-root-modals doesn't offer ready-to-use modals, but it allows you easily create your own.

Let's start with `SimpleModal.vue`:

```html

  

    {{ text }}

  

export default {

  name: "modal",

  props: {

    modalID: Number,

    resolve: Function,

    reject: Function,

    text: String,

  }

};

.modal {

  display: block;

  background-color: white;

  color: black;

  max-width: 200px;

  padding: 10px;

}

```

The next step is to create a file which holds all your modals. For example, `modals.js`:

  

```js

import RootModals from "vue-root-modals";

import SimpleModal from "./SimpleModal.vue";

// Create new instance and pass there our modal

const rootModals = new RootModals({

  SimpleModal

});

export default rootModals;

```

Then we should import `modals.js` inside `main.js` and pass `RootModals` object to `Vue.use()` method. Also you should register the library in `components`:

```js

import { RootModal } from 'vue-root-modals';

import modals from './modals.js'

Vue.use(modals)

new Vue({

  components: {

    RootModal

  },

  template: `

    


      

      Open Modal

    

  `

})

```


That's all. You can call modals from anywhere with simple `this.$modals.SimpleModal({ options })` now. All modals generate methods based on object key name you have passed to `new RootModals({...})` and then they are in `$modals`.

All `options` are passed to modal as props. Also there are properties `resolve`, `reject` & `modalID`. Thanks to this you can work with modals using promises:

```js

const methods = {

  async openModal() {

    try {

      const response = await this.$modals.SimpleModal();

    } catch (err) {

      console.log(err);

    }

  }

}

```