Модальное окно в архитектуре nuxt

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

1 ответ

Решение

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

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

Другие вопросы по тегам