blocks|key|1936557|text|我正在学习nuxt3+too.Here是如何在我的nuxt3应用程序中使用甜警报2的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1936558|plugins/swal.js|1936559|import+Swal+from+"sweetalert2";
import+"@sweetalert2/theme-bootstrap-4";
const+$swal+=+{
++++install:+(Vue,+options)+=>+{
++++++++Vue.config.globalProperties.$swal+=+Swal.mixin(options);
++++},
}
export+default+defineNuxtPlugin((nuxtApp)+=>+{
++++nuxtApp.vueApp.use($swal,+{
++++++++reverseButtons:+true,
++++++++confirmButtonText:+"confirmText",
++++++++cancelButtonText:+"cancelText",
++++++++confirmButtonColor:+"#84bd00",
++++});
});|code-block|syntax|javascript|1936560|组件中的使用|1936561|<script>
++++export+default+{
++++++const+fn+=+getCurrentInstance().appContext.config.globalProperties;
++++++fn.$swal.fire({
++++++++++title:+"hello",
++++++++++timer:+2000,
++++++});
++++}
</script>|1936562|或者通过提供和注入来使用，我的plugins/swal.js将是这样的。|offset|length|style|CODE|1936563|import+Swal+from+"sweetalert2";
import+"@sweetalert2/theme-bootstrap-4";
const+options+=+{
++++reverseButtons:+true,
++++confirmButtonText:+"confirmText",
++++cancelButtonText:+"cancelText",
++++confirmButtonColor:+"#84bd00",
}
const+$swal+=+{
++++install:+(Vue,+options)+=>+{
++++++++Vue.provide("$swal",+Swal.mixin(options));
++++},
}
export+default+defineNuxtPlugin((nuxtApp)+=>+{
++++nuxtApp.vueApp.use($swal,+options);
});|1936564|1936565|<script>
++++export+default+{
++++++const+swal+=+inject("$swal");
++++++swal.fire({
++++++++++title:+"hello",
++++++++++timer:+2000,
++++++});
++++}
</script>|1936566|希望能帮上忙。|1936567|entityMap^0|0|0|0|0|0|F|F|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|14|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|16|8|@$O|17|P|18|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|U|3|J|5|6|7|1A|8|@]|9|@]|A|$]]|$1|V|3|W|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|X|3|Y|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|10|$]]

I'm learning nuxt3 too.Here is how I use sweet alert 2 in my app of nuxt3.
plugins/swal.js
<pre><code>import Swal from &quot;sweetalert2&quot;;
import &quot;@sweetalert2/theme-bootstrap-4&quot;;
const $swal = {
 install: (Vue, options) =&gt; {
 Vue.config.globalProperties.$swal = Swal.mixin(options);
 },
}
export default defineNuxtPlugin((nuxtApp) =&gt; {
 nuxtApp.vueApp.use($swal, {
 reverseButtons: true,
 confirmButtonText: &quot;confirmText&quot;,
 cancelButtonText: &quot;cancelText&quot;,
 confirmButtonColor: &quot;#84bd00&quot;,
 });
});
</code></pre>
Usage in components
<pre><code>&lt;script&gt;
 export default {
 const fn = getCurrentInstance().appContext.config.globalProperties;
 fn.$swal.fire({
 title: &quot;hello&quot;,
 timer: 2000,
 });
 }
&lt;/script&gt;
</code></pre>
Or use by provide and inject, My <code>plugins/swal.js</code> will be like this.
<pre><code>import Swal from &quot;sweetalert2&quot;;
import &quot;@sweetalert2/theme-bootstrap-4&quot;;
const options = {
 reverseButtons: true,
 confirmButtonText: &quot;confirmText&quot;,
 cancelButtonText: &quot;cancelText&quot;,
 confirmButtonColor: &quot;#84bd00&quot;,
}
const $swal = {
 install: (Vue, options) =&gt; {
 Vue.provide(&quot;$swal&quot;, Swal.mixin(options));
 },
}
export default defineNuxtPlugin((nuxtApp) =&gt; {
 nuxtApp.vueApp.use($swal, options);
});
</code></pre>
Usage in components
<pre><code>&lt;script&gt;
 export default {
 const swal = inject(&quot;$swal&quot;);
 swal.fire({
 title: &quot;hello&quot;,
 timer: 2000,
 });
 }
&lt;/script&gt;
</code></pre>
Hope it's helpful.

blocks|key|1936590|text|你可以让它变得更简单：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1936591|插件/甜警报2.ts|1936592|import+Swal+from+'sweetalert2'

export+default+defineNuxtPlugin((nuxtApp)+=>+{
++nuxtApp.provide('swal',+Swal)
})|code-block|syntax|javascript|1936593|<script+setup>中的用法|CODE|1936594|const+{+$swal+}+=+useNuxtApp()

$swal.fire({
++title:+'Error!',
++text:+'Do+you+want+to+continue',
++icon:+'error',
++confirmButtonText:+'Cool'
})|1936595|entityMap^0|0|B|0|0|0|0|E|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Y|8|@$9|Z|A|10|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|R|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|S|$]]

You can make it easier:
plugins/sweetalert2.ts
<pre><code>import Swal from 'sweetalert2'

export default defineNuxtPlugin((nuxtApp) =&gt; {
 nuxtApp.provide('swal', Swal)
})
</code></pre>
usage in <code>&lt;script setup&gt;</code>
<pre><code>const { $swal } = useNuxtApp()

$swal.fire({
 title: 'Error!',
 text: 'Do you want to continue',
 icon: 'error',
 confirmButtonText: 'Cool'
})
</code></pre>

I'm struggling to integrate sweet alert 2 as a plugin into a nuxt3 app. I'm trying to use <a href="https://github.com/sweetalert2/sweetalert2" rel="nofollow noreferrer">vue-sweetalert2</a> but I at some point it define global variables.
<pre class="lang-js prettyprint-override"><code>// Inside the install function
vue.prototype.$swal = swalFunction;
vue['swal'] = swalFunction;
</code></pre>
Could you please help me, how to access these global variable? The documentation do not show that.
I guess the goal would be to have inside my plugin something like:
<pre class="lang-js prettyprint-override"><code>import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

export default defineNuxtPlugin((nuxtApp) =&gt; {
 nuxtApp.vueApp.use(VueSweetalert2)

 return {
 provide: {
 swal: swalFunction // &lt;- how to access this ?
 }
 }
})
</code></pre>

Add sweet alert 2 to nuxt3 project

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我正努力将甜警报2作为插件集成到nuxt3应用程序中。我正在尝试使用，但在某种程度上它定义了全局变量。// Inside the install functionvue.prototype.$swal = swalFunction;vue['swal'] = swalFunction;请你帮我一下，如何访问这些全局变量...

问向nuxt3项目添加甜警报2
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向nuxt3项目添加甜警报2EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向nuxt3项目添加甜警报2
EN