avil13 / Vue Sweetalert2
Licence: mit
A convenient wrapper for sweetalert2.
Stars: ✭ 429
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Sweetalert2
Ssr Accounts
V2Ray, 免费V2Ray账号分享, 翻墙,无界, 自由门, SquirrelVPN, SS账号, 机场
Stars: ✭ 3,854 (+798.37%)
Mutual labels: ssr
Shadowsocksx Ng R
ShadowsocksX-NG-R: Shadowsocks(R) Client for MacOS
Stars: ✭ 393 (-8.39%)
Mutual labels: ssr
After.js
Next.js-like framework for server-rendered React apps built with React Router
Stars: ✭ 4,051 (+844.29%)
Mutual labels: ssr
React Native Awesome Alerts
Awesome alerts for React Native, works with iOS and Android.
Stars: ✭ 391 (-8.86%)
Mutual labels: alert
Freepac
科学上网/翻墙梯子/自由上网/SS/SSR/V2Ray/Brook 搭建教程 免费机场、VPN工具
Stars: ✭ 4,515 (+952.45%)
Mutual labels: ssr
Subconverter
Utility to convert between various subscription format
Stars: ✭ 4,912 (+1044.99%)
Mutual labels: ssr
Siren
Siren checks a user's currently installed version of your iOS app against the version that is currently available in the App Store.
Stars: ✭ 3,892 (+807.23%)
Mutual labels: alert
React Lego
React-lego : incrementally add more cool stuff to your react app
Stars: ✭ 417 (-2.8%)
Mutual labels: ssr
React Uploady
Modern file uploading - components & hooks for React
Stars: ✭ 372 (-13.29%)
Mutual labels: ssr
Cra Universal
🌏 Create React App companion for universal app. No eject, auto SSR, zero config, full HMR, and more (inactive project)
Stars: ✭ 419 (-2.33%)
Mutual labels: ssr
Pudding
🌟 Pudding use WindowManager(don't need request permission) to pull down a view that are displayed on top their attached window
Stars: ✭ 371 (-13.52%)
Mutual labels: alert
Uiwidget
一个集成TabLayout、UIAlertDialog、UIActionSheetDialog、UIProgressDialog、TitleBarView(自带沉浸式标题栏)、CollapsingTitleBarLayout、RadiusView(圆角及状态背景设置View解放shape文件)、KeyboardHelper(软键盘控制及遮挡控制类)、StatusViewHelper(状态栏沉浸帮助类)、NavigationViewHelper(导航栏沉浸式帮助类)、AlphaViewHelper(View透明度控制帮助类) 等项目常用UI库
Stars: ✭ 400 (-6.76%)
Mutual labels: alert
React Server
🚀 Blazing fast page load and seamless navigation.
Stars: ✭ 3,932 (+816.55%)
Mutual labels: ssr
vue-sweetalert2
Vue.js wrapper for SweetAlert2. With support SSR.
Attention:
When using "Vue3: Composition API" it is better not to use this wrapper. It is more practical to call sweetalert2 directly.
Also, it is better to do it to get feedback faster, and be closer to the documentation.
Get started
Basics
# bash
npm install -S vue-sweetalert2
Add types to TypeScript project
{
//...tsconfig.json
"types": [
"vue-sweetalert2"
],
}
vue 2
// main.js
import Vue from 'vue';
import VueSweetalert2 from 'vue-sweetalert2';
// If you don't need the styles, do not connect
import 'sweetalert2/dist/sweetalert2.min.css';
Vue.use(VueSweetalert2);
vue 3
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
const app = createApp(App)
app.use(VueSweetalert2);
app.mount('#app');
Now in the global object, you can access all the methods of sweetalert2.
// example-vue-component.vue
<template>
<button @click="showAlert">Hello world</button>
</template>
<script>
export default {
methods: {
showAlert() {
// Use sweetalert2
this.$swal('Hello Vue world!!!');
},
},
};
</script>
// Or
Vue.swal('Hello Vue world!!!');
Global options
If you want to add global options like button colors, do something like this:
// main.js
import Vue from 'vue';
import VueSweetalert2 from 'vue-sweetalert2';
const options = {
confirmButtonColor: '#41b882',
cancelButtonColor: '#ff7674',
};
Vue.use(VueSweetalert2, options);
Custom styling
Using scss styles are loaded so
// main.js
import Vue from 'vue';
import VueSweetalert2 from 'vue-sweetalert2';
Vue.use(VueSweetalert2);
// style.scss
@import '~sweetalert2/src/variables';
$swal2-background: #990000;
@import '~sweetalert2/src/sweetalert2';
Nuxt.js
Install dependencies:
npm install -S vue-sweetalert2
Add vue-sweetalert2/nuxt
to modules section of nuxt.config.js
{
modules: ['vue-sweetalert2/nuxt'];
}
Or pass in global options like this:
{
modules: [
[
'vue-sweetalert2/nuxt',
{
confirmButtonColor: '#41b882',
cancelButtonColor: '#ff7674'
}
]
]
}
Using a different theme in Nuxt
Add vue-sweetalert2/nuxt
to modules section of nuxt.config.js
{
// Before doing so, install the "@sweetalert2/theme-dark"
css: [ '@sweetalert2/theme-dark' ],
modules: ['vue-sweetalert2/nuxt/no-css'];
}
sweetalert2
, you can find here.
The documentation for 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].