nuxt架构中的Modal window

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 但我真的不想为了那个目的而注入这个大包。

Answer 1

您可以在 layouts/default.vue 文件中编写代码，此文件在您的默认设置下运行，在您用作页面布局的位置（通常几乎无处不在）运行代码。

不同的方法是使用 portalvue to render components whereever you want. Nice article here 但使用土耳其语。