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

Для создания глобального модального компонента в Nuxt.js вам понадобится несколько шагов.

1. Создайте компонент модального окна:
Создайте файл с расширением .vue для модального окна, например Modal.vue. Внутри этого файла определите необходимую разметку и логику для модального окна. Предоставьте понятные имена для пропсов, которые будут передаваться в компонент, такие как title, content, onClose, и т.д.

<template>
  <div class="modal">
    <div class="modal__content">
      <h2>{{ title }}</h2>
      <p>{{ content }}</p>
      <button @click="onClose">Close</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true
    },
    onClose: {
      type: Function,
      required: true
    }
  }
}
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}
</style>

2. Создайте плагин для глобального компонента:
Создайте файл плагина в папке plugins вашего проекта, например modal.js. Внутри этого файла определите функцию, которая будет регистрировать ваш компонент в качестве глобального компонента.

import Vue from 'vue'
import Modal from '~/components/Modal.vue'

Vue.component('Modal', Modal)

3. Подключите плагин:
В файл nuxt.config.js добавьте ваш плагин в массив plugins, чтобы он был подключен автоматически.

module.exports = {
  // ...
  plugins: [
    // ...
    '@/plugins/modal.js'
  ]
}

4. Используйте глобальный модальный компонент:
Теперь вы можете использовать ваш глобальный модальный компонент где угодно в вашем проекте, просто используя его тег <Modal> с необходимыми пропсами.

<template>
  <div>
    <button @click="showModal">Open Modal</button>
    
    <Modal
      v-if="isModalVisible"
      :title="modalTitle"
      :content="modalContent"
      :onClose="closeModal"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isModalVisible: false,
      modalTitle: 'Sample Modal',
      modalContent: 'This is a sample modal window.'
    }
  },
  methods: {
    showModal() {
      this.isModalVisible = true
    },
    closeModal() {
      this.isModalVisible = false
    }
  }
}
</script>

Теперь у вас есть глобальный модальный компонент, который можно использовать по всему вашему проекту. При нажатии на кнопку "Open Modal" модальное окно будет открываться, отображая указанный контент и название. При нажатии на кнопку "Close" окно будет закрываться с помощью функции, переданной в пропс onClose.