@Analka

Как создать глобальный модальный компонент — модальное окно на Nuxt js?

Есть компонент Modal

<transition name="modal">
        <div class="modal-mask">
          <div class="modal-wrapper">
            <div class="modal-container">

              <div class="modal-header">
                <slot name="header">
                  default header
                </slot>
              </div>

              <div class="modal-body">
                <slot name="body">
                  default body
                </slot>
              </div>

              <div class="modal-footer">
                <slot name="footer">
                  default footer
                  <button class="modal-default-button" @click="$emit('close')">
                    OK
                  </button>
                </slot>
              </div>
            </div>
          </div>
        </div>
      </transition>


как в Nuxt js сделать его глобальным и чтобы можно было вызывать через $modal.show('name modal')
  • Вопрос задан
  • 31 просмотр
Пригласить эксперта
Ответы на вопрос 2
yarkov
@yarkov
Проект "Жизнь после смерти" - lifeafterdeath.ru
Сделать плагин
Ответ написан
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
Выносите модалку в корень приложения.

@ > layouts > default.vue
<template>
  <div>
    <main>
      <div class="container">
        <Nuxt /> // other app
      </div>
    </main>
    <Modal /> // modal
  </div>
</template>

<script>

import Modal from '@/components/Modal.vue';

export default {
  components: {
    Modal
  }
}

</script>

<style>
</style>

В этом, как раз, и самый смак роутов. По роутам будет меняться только , а всё, что вокруг - нет
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы