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

Question

[Analka]

Есть компонент 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')

Answer 1

[Алексей Ярков]

Сделать плагин

Comments

[Analka]

я чет не нашел подробную доку, в оф непонятно малек как привязать компонент к переменной

[Алексей Ярков]

Analka,

как привязать компонент к переменной

Зачем? Нужно Vue плагин сделать.

Answer 2

[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>

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