Skip to content

Commit f823b7b

Browse files
committed
update README
1 parent 01094ce commit f823b7b

File tree

1 file changed

+80
-14
lines changed

1 file changed

+80
-14
lines changed

README.md

Lines changed: 80 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,11 @@
1616
</a>
1717
</p>
1818

19-
### 🎉 [Documentation](https://vue-final-modal.org)
19+
Looking for a Vue 3 version? [It's over here](https://github.com/hunterliu1003/vue-final-modal/tree/next)
2020

21-
### 🙌 [Examples](https://vue-final-modal.org/examples)
21+
## 🎉 [Documentation](https://vue-final-modal.org)
22+
23+
## 🙌 [Examples](https://vue-final-modal.org/examples)
2224

2325
## Introduction
2426

@@ -39,7 +41,7 @@ features:
3941
- Tiny bundle size
4042
- Accessibility support
4143

42-
## Install
44+
## Installation
4345

4446
**Vue 3.0**
4547

@@ -55,7 +57,7 @@ Yarn:
5557
yarn add vue-final-modal@next
5658
```
5759

58-
**Vue 2.x**
60+
**Vue 2.0**
5961

6062
NPM:
6163

@@ -71,7 +73,11 @@ yarn add vue-final-modal
7173

7274
## Basic usage
7375

74-
**1. Import and register the modal component.**
76+
### Register
77+
78+
#### Vue
79+
80+
- **Register in SFC**
7581

7682
```js
7783
import { VueFinalModal } from 'vue-final-modal'
@@ -83,21 +89,65 @@ export default {
8389
}
8490
```
8591

86-
**2. Add the modal component to the template.**
92+
- **Install globally**
93+
94+
```js
95+
import { VueFinalModal } from 'vue-final-modal'
96+
97+
Vue.component('VueFinalModal', VueFinalModal)
98+
```
99+
100+
#### Nuxt
101+
102+
- **Write a plugin `vue-final-modal.js`**
103+
104+
```js
105+
// plugins/vue-final-modal.js
106+
import VueFinalModal from 'vue-final-modal/lib/VueFinalModal.vue'
107+
108+
Vue.component('VueFinalModal', VueFinalModal)
109+
```
110+
111+
- **Add plugin into `nuxt.config.js`**
112+
113+
```js
114+
// nuxt.config.js
115+
export default {
116+
plugins: [
117+
'~plugins/vue-final-modal.js'
118+
],
119+
}
120+
```
121+
122+
#### CDN
123+
124+
- **jsDelivr**
125+
126+
```html
127+
<script src="https://cdn.jsdelivr.net/npm/vue-final-modal"></script>
128+
```
129+
130+
- **Unpkg**
131+
132+
```html
133+
<script src="https://unpkg.com/vue-final-modal"></script>
134+
```
135+
136+
### **Add component to template**
87137

88138
```html
89139
<vue-final-modal v-model="showModal">
90140
Modal Content Here
91141
</vue-final-modal>
92142
```
93143

94-
**3. Create a button to toggle the modal.**
144+
### **Create a button**
95145

96146
```html
97147
<button @click="showModal = true">Launch</button>
98148
```
99149

100-
**4. All default props**
150+
### **Default props**
101151

102152
```js
103153
const CLASS_TYPES = [String, Object, Array]
@@ -120,13 +170,29 @@ const CLASS_TYPES = [String, Object, Array]
120170
}
121171
```
122172

123-
**5. Events.**
173+
## **Events**
174+
175+
### `@click-outside`
176+
177+
- Emits while modal container on click.
178+
179+
> If prop `clickToClose` is `false`, the event will still be emitted.
180+
181+
### `@before-open`
182+
183+
- Emits while modal is still invisible, but before transition starting.
184+
185+
### `@opened`
186+
187+
- Emits after modal became visible and transition ended.
188+
189+
### `@before-close`
190+
191+
- Emits before modal is going to be closed.
192+
193+
### `@closed`
124194

125-
- @click-outside: Modal container on click
126-
- @before-open: Before open
127-
- @opened: When opened
128-
- @before-close: Before close
129-
- @closed: After closed
195+
- Emits right before modal is destroyed.
130196

131197
## Contribution
132198

0 commit comments

Comments
 (0)