anteriovieira / Vue Swal
Licence: mit
A small wrapper for integrating SweetAlert to Vuejs
Stars: ✭ 177
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue Swal
Vue Lazyload Images
A plugin of lazy-load images for Vue2.x
Stars: ✭ 61 (-65.54%)
Mutual labels: vue-plugin
Vue Plugin Simple
A template to create vue plugins and shareable components.
Stars: ✭ 114 (-35.59%)
Mutual labels: vue-plugin
Vue Qrcode Reader
A set of Vue.js components for detecting and decoding QR codes.
Stars: ✭ 1,240 (+600.56%)
Mutual labels: vue-plugin
Vue Ellipse Progress
A Vue.js component to create beautiful animated circular progress bars
Stars: ✭ 101 (-42.94%)
Mutual labels: vue-plugin
Vue Tabevents
Event-Based communication across opened tabs for Vue 2.x
Stars: ✭ 31 (-82.49%)
Mutual labels: vue-plugin
Vue Warehouse
A Cross-browser storage for Vue.js and Nuxt.js, with plugins support and easy extensibility based on Store.js.
Stars: ✭ 161 (-9.04%)
Mutual labels: vue-plugin
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+6720.34%)
Mutual labels: vue-plugin
V Dragged
Vue directive plugin for drag event detection.
Stars: ✭ 84 (-52.54%)
Mutual labels: vue-plugin
Vue Core Image Upload
a vue plugin for image to crop and upload
Stars: ✭ 1,321 (+646.33%)
Mutual labels: vue-plugin
Vue Scrollto
Adds a directive that listens for click events and scrolls to elements.
Stars: ✭ 1,859 (+950.28%)
Mutual labels: vue-plugin
Vue Scroll Progress Bar
Vue.js plugin for page scroll progress bar
Stars: ✭ 76 (-57.06%)
Mutual labels: vue-plugin
Vue Codemirror
⌨️ @codemirror component for @vuejs
Stars: ✭ 2,115 (+1094.92%)
Mutual labels: vue-plugin
Vue Async Computed
Async computed properties for Vue.js
Stars: ✭ 990 (+459.32%)
Mutual labels: vue-plugin
Vue Barcode Scanner
Barcode Scanner Plugin for Vue.js
Stars: ✭ 116 (-34.46%)
Mutual labels: vue-plugin
Vue Dragscroll
A vue directive to make a scrollable element scroll by draging to the scroll direction
Stars: ✭ 175 (-1.13%)
Mutual labels: vue-plugin
VueSwal
You can customize VueSwal to fit your needs.
Installation
npm
npm install vue-swal
yarn
yarn add vue-swal
Usage
Bundler (Webpack, Rollup)
import Vue from 'vue'
import VueSwal from 'vue-swal'
Vue.use(VueSwal)
Browser
<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-swal/dist/vue-swal.js"></script>
<!-- From CDN -->
<script src="https://unpkg.com/vue-swal"></script>
Simply happens
export default {
methods: {
alert() {
this.$swal('Hello word!')
}
}
}
Examples
Basic Example | Advanced Example |
---|---|
Using Nuxt.js
Using the plugin with nuxt is really very simple.
Add file plugins/vue-swal.js
:
import Vue from 'vue'
import VueSwal from 'vue-swal'
Vue.use(VueSwal)
Then, we add the file inside the plugins
key of nuxt.config.js
:
module.exports = {
plugins: ['~/plugins/vue-swal']
}
To learn more about the
plugins
configuration key, check out the plugins api.
The, vue-swal
will be included in the app bundle, but because it's a library, we want to include it in the vendor bundle for better caching.
We can update our nuxt.config.js
to add vue-swal
in the vendor bundle:
module.exports = {
build: {
vendor: ['vue-swal']
},
plugins: ['~/plugins/vue-swal']
}
Click here to see a complete example.
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].