Модальное окно в архитектуре 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 для рендеринга компонентов там, где вы хотите. Хорошая статья здесь.