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
5557yarn add vue-final-modal@next
5658```
5759
58- ** Vue 2.x **
60+ ** Vue 2.0 **
5961
6062NPM:
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
7783import { 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
103153const 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