vue-cute-modal
A simple and easy to use Modal component for Vue applications.
Features
- Simple API
- Customizable modal classes
- Customizable Vue transition name
- Name component whatever you like!
Install
npm i vue-cute-modal yarn add vue-cute-modal
For In-DOM templates include the JS CDN and optionally the CSS in your project:
CDN:
Usage
Setup
Include the plugin at the root of your application
Vue
Creating a Modal
Simply create your modal in your Vue app:
Your modal content.
Then open/hide the modal within the app:
// Opens the modalthis$cuteModal // Hides the modalthis$cuteModal
Basic Example
Open Modal Hello World! <!-- import CSS through SCSS or Link to compiled CSS whichever you prefer --><!-- or use your own custom styles! -->
Customizing the Component
The plugin comes with some base styles and classes. These may not fit your project and you may wish to override. We can do this via global settings or props.
To override defaults globally pass in the configuration object when you register the component to Vue.use()
:
/** Default Settings */const DEFAULT_OPTIONS = body: 'cute-modal__body' container: 'cute-modal__container' footer: 'cute-modal__footer' header: 'cute-modal__header' height: 'auto' overlay: 'cute-modal__overlay' transition: 'modal' width: '600px' Vue
Alternatively, you could pass props separately to each component. Note that these will override the globally set options.
<!-- -->
API
Props
Full prop list
Name | Required | Type | Description |
---|---|---|---|
name | true | String | Name of your modal |
containerClass | false | String | Class name for container of modal |
footerClass | false | String | Modal footer class name |
headerClass | false | String | Modal header class name |
height | false | String | Set the height of the modal |
overlayClass | false | String | Overlay class name |
transition | false | String | Name for Vue transition |
wdith | false | String | Set the width of the modal |
Methods
// Open a Modalthis$cuteModal // Close a Modalthis$cuteModal
In 1.1 a built in hide method is made available within the header and footer slots. It will be available on the slot-scope
as a method named $hide
. It takes no parameters.
Some content Hide Me
Development Setup
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# run unit testsnpm run unit# run all testsnpm test