vue.js - nuxt架构中的模态窗口

Question

在我使用 Vue2JS 之前，我习惯于在 App.vue 根组件中创建模态组件，例如：

<template>
    <div>
        <app-navbar></app-navbar>
        <router-view></router-view>
        <app-footer></app-footer>
        <my-modal v-if="someBoolean"></my-modal>
    </div>
</template>

现在，基于一些自定义事件或 Vuex 存储，我能够someBoolean在我希望模态显示时进行更改和触发。

由于在 Nuxt 中我们没有根 App.vue 组件之类的东西，我想知道如何使用 Nuxt 实现与上面相同的功能。

当然，我可以使用一些包作为 bootstrap-vue，但我真的不想仅仅为了这个目的而注入这个大包。

标签： vue.jsvuejs2modal-dialognuxt.js

Answer 1

您可以在 layouts/default.vue 文件中编写代码，该文件适用于您的默认设置，在您用作页面布局的位置（通常几乎在任何地方）处理代码。

不同的方法是使用portalvue在任何你想要的地方渲染组件。这里的文章不错，但用的是土耳其语。