Модальное окно в архитектуре 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, но я не хочу вставлять этот большой пакет только для этой цели.

Answer 1

Вы можете написать код в файле layouts / default.vue, и этот файл будет работать с вашими настройками по умолчанию, работать с кодом там, где вы использовали его как макет ваших страниц (как правило, почти везде).

Другой подходиспользуйте portalvue для визуализации компонентов в любом месте.Хорошая статья здесь .