Navigation

📁 vue

Vue.jsでモーダルダイアログを実装する方法

📅 7月 8, 2025
👤
⏱ 2 min read

概要

モーダルダイアログはユーザーエクスペリエンスを向上させるために頻繁に使用されるUIパターンです。Vue.jsを使用してモーダルダイアログを実装することで、ユーザーとのインタラクションを改善し、情報の重要性を強調することができます。

基本実装


<template>
  <div>
    <!-- モーダルダイアログの基本実装 -->
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

const data = ref()

onMounted(() => {
  /* ライフサイクルフック */
})
</script>

<style scoped>
/* モーダルスタイル */
</style>

Composition API活用


import { ref, computed } from 'vue'

export function useModal() {
  const isOpen = ref(false)
  
  const toggleModal = () => {
    isOpen.value = !isOpen.value
  }
  
  return {
    isOpen,
    toggleModal
  }
}

テンプレート構文


<template>
  <div v-if="isOpen">
    <div>
      <!-- モーダルコンテンツ -->
    </div>
  </div>
</template>

状態管理


import { defineStore } from 'pinia'

export const useModalStore = defineStore('modal', () => {
  const isOpen = ref(false)
  
  const openModal = () => {
    isOpen.value = true
  }
  
  const closeModal = () => {
    isOpen.value = false
  }
  
  return {
    isOpen,
    openModal,
    closeModal
  }
})

実践例


<template>
  <div>
    <button @click="openModal">モーダルを開く</button>
    <Modal v-if="isOpen" @close="closeModal" />
  </div>
</template>

<script>
import Modal from './Modal.vue'
import { useModalStore } from './store/modal'

export default {
  setup() {
    const { isOpen, openModal, closeModal } = useModalStore()

    return {
      isOpen,
      openModal,
      closeModal
    }
  }
}
</script>

関連技術・参考情報

  • Vue.js Composition API: https://v3.vuejs.org/guide/composition-api-introduction.html
  • Nuxt.jsでの活用方法: Nuxt.jsでも同様の方法でモーダルダイアログを実装することができます。
  • 学習リソース: Vue MasteryやVue Schoolなどのオンライン学習プラットフォームでVue.jsの基本から応用まで学ぶことが可能です。

この記事では、Vue.jsのComposition APIを活用してモーダルダイアログを実装する方法を紹介しました。コンポーネントの再利用性や状態管理を考慮した設計を行うことで、より効率的にモーダルダイアログを扱うことができます。

← Back to vue