Help us understand the problem. What is going on with this article?

【vue-js-modal】を使ってNuxt.js(vue.js)でモーダルを実装してみた

vue-js-modal】は簡単にモーダルウィンドウを実装できるコンポーネントです。
Nuxt.jsでの使い方をまとめました。
イメージは下記の感じです。
lightbox.gif

まずは【vue-js-modal】インストールします。

npm install vue-js-modal --save

Nuxt.jsのディレクトリ構成は下記のようになっています。
nuxt.JPG

pluginsディレクトリにファイルを作成し【vue-js-modal】をインポートします。

今回はmain.jsと言うファイルを作成しました。

├── plugin
│   ├── main.js
main.js
import Vue from 'vue'
import VModal from 'vue-js-modal'

Vue.use(VModal)

次にnuxt.config.jsを編集していきます。

nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/main.js'}
  ],
}

これで【vue-js-modal】が使用可能になりました。あとは使いたいコンポーネントで使用していきます。

<template>
 <div>
   <button @click="show">クリックする</button>

   <modal name="modal-content">
      <p>モーダルウィンドウで表示されるコンテンツ</p>
   </modal>
 </div>
</template>

<script>
export default {
  methods: {
    show() {
      this.$modal.show("modal-content");
    },
    hide() {
      this.$modal.hide("modal-content");
    }
  }
};
</script>

this.$modal.show()がモーダルウィンドウを開くメソッド、
this.$modal.hide()がモーダルウィンドウを閉じるメソッドになっています。

これだけでモーダルウィンドウができちゃいます。
【vue-js-modal】にはオプションも複数あり、モーダルウィンドウに動きなども追加できます。

例えば下記のような感じです。

   <modal name="modal-content" width="80%" height="auto" :scrollable="true" :draggable="true">
      <p>モーダルウィンドウで表示されるコンテンツ</p>
   </modal>

横幅を指定したり、スクロールバーの有無やモーダルウィンドウをドラッグ可能にすることもできます。

詳しいオプションの種類は下記に記載されています。

vue-js-modal

最後に

今回はvue.jsで簡単にモーダルウィンドウが実装できる【vue-js-modal】を使ってみました。
ちょうどポートフォリオサイトをNuxt.jsで作っており、作品の紹介などでモーダルウィンドウを実装したかったので・・・
オプションも豊富なので、かなり便利でした。

lightbox.gif

To-K
フロントエンドエンジニア目指し中
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした