# vue-ustmodal

> Vue.js Modal

Latest version **0.1.4** (published 2019-10-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-ustmodal
pnpm add vue-ustmodal
yarn add vue-ustmodal
bun add vue-ustmodal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2019-10-05 |
| First published | 2019-09-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Danushka |
| Maintainers | danushka96 |
| Keywords | vue, vuejs, vue.js, vuejs2, modal, script, vue modal, modal js, javascript |

## Links

- npm: https://www.npmjs.com/package/vue-ustmodal
- Repository: https://github.com/Danushka96/vue-ustmodal
- Homepage: https://github.com/Danushka96/vue-ustmodal#readme
- Issues: https://github.com/Danushka96/vue-ustmodal/issues
- npm.io page: https://npm.io/package/vue-ustmodal

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.1.4 (latest) — 2019-10-05
- 0.1.3 — 2019-10-05
- 0.1.2 — 2019-10-02
- 0.1.1 — 2019-10-01
- 0.1.0 — 2019-10-01
- 0.0.9 — 2019-10-01
- 0.0.8 — 2019-10-01
- 0.0.7 — 2019-10-01
- 0.0.6 — 2019-09-30
- 0.0.5 — 2019-09-30
- 0.0.4 — 2019-09-28
- 0.0.3 — 2019-09-28
- 0.0.2 — 2019-09-28
- 0.0.1 — 2019-09-28

## README

# vue-ustmodal

[![Version](https://img.shields.io/npm/v/vue-ustmodal.svg)](https://npmjs.org/package/open-source-npm-package-template)
![Travis (.org)](https://img.shields.io/travis/prokopsimek/open-source-npm-package-template)
[![Downloads/week](https://img.shields.io/npm/dw/vue-ustmodal.svg)](https://npmjs.org/package/open-source-npm-package-template)
[![License](https://img.shields.io/npm/l/vue-ustmodal.svg)](https://github.com/danushka96/vue-ustmodal/blob/master/package.json)
![npm collaborators](https://img.shields.io/npm/collaborators/vue-ustmodal)

## Intro

vue-ustmodal is a modal that can be used in your components without thinking about stylings or modal behaviour.

![](https://i.imgur.com/gEP96qq.gif)


## Getting Started

### Installation

- with NPM
  
  ```$ npm install -save vue-ustmodal``` 
- with Yarn 
  
  ```$ yarn add vue-ustmodal```

### Usage

**Example**

main.js
```javascript=true
import Vue from 'vue'
import App from './App.vue'
import ustModal from "vue-ustmodal";

Vue.config.productionTip = false
Vue.use(ustModal);

new Vue({
  render: h => h(App),
}).$mount('#app')
```
Component.vue
```javascript=true
<template>
<div>
    <div class="modal">
        <button @click="modal = true">Open</button>
        
        <ustModal v-model="modal" :styles="styles"> 
            <h3 slot="title">Custom Header</h3>
            <div slot="body">
                <p>This Modal Body</p>
                <p>This Modal Body</p>
                <p>This Modal Body</p>
                <p>This Modal Body</p>
                <p>This Modal Body</p>
            </div>
            <div slot="actions">
                <button @click="modal=false">Cancel</button>
                <button @click="modal=false">OK</button>
            </div>
        </ustModal>
    </div>
</div>
</template>

<script>
import ustModal from './ustModal'
export default {
    components: {
        ustModal
    },
    data: () =>  ({
        modal: true,
        styles: {
            width: "500px"
        }
    })
}
</script>
```

## Contributing

Feel free to contribute to the Open Source NPM Package Template. If you want to contribute.

## License

The Open Source NPM Package Template is licensed under the [Attribution-NonCommercial-ShareAlike 4.0 International License](https://creativecommons.org/licenses/by-nc-sa/4.0/).

---
_Source: https://npm.io/package/vue-ustmodal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._