2018.10.22

Nuxt.jsとMaterializeを組み合わせる方法

Nuxt.js

スタイルシート

まずはスタイルシートをインストールします。

$ npm install -D materialize-css@next node-sass sass-loader

見た目をカスタマイズできるように SCSS を使用します。

app.scss

@import '@/node_modules/materialize-css/sass/materialize.scss';

nuxt.config.js

次に nuxt.config.js を編集します。以下の設定を追加しましょう。

nuxt.config.js

module.exports = {
  // (1)
  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js' }
    ]
  },

  // (2)
  css: [
    '@/assets/sass/app.scss'
  ],

  // (3)
  plugins: [
    '@/plugins/materialize'
  ],
}

head で JS ファイルを読み込んでいます。
css では SCSS ファイルを読み込みます。
plugins ではプラグインを読み込みます。プラグインについては以下で説明します。

プラグイン

プラグインはアプリケーションが起動する際に一度だけ実行されます。以下のように inject メソッドを実行すると、ページコンポーネント内で this.$第一引数 という記述で第二引数を参照できます。つまり、Materialize の JavaScript コンポーネント初期化コードをプラグインにまとめてしまって、あとで this.$materialize から呼び出す作戦です。

plugins/materialize.js

const materialize = {
  collapsible (option = {}) {
    const elems = document.querySelectorAll('.collapsible')
    M.Modal.init(elems, option)
  }
}

export default (context, inject) => {
  inject('materialize', materialize)
}

初期化コードは Matarialize のマニュアルに載っています。今回は例として Collapsible のみ記述しましたが、必要に応じて使用するパーツを加えてください。

ページコンポーネント

続いてページコンポーネントでプラグインを呼び出すコードの例です。ページコンポーネントとは pages ディレクトリの配下にあるコンポーネントで、画面全体を表現します。

<template>
  <section>
    <ul class="collapsible">
      <li>
        <div class="collapsible-header"><!-- Content --></div>
        <div class="collapsible-body"><!-- Content --></div>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  mounted () {
    this.$materialize.collapsible()
  }
}
</script>

上記のように mounted メソッドで使用したい Matarialize パーツの初期化コードを呼び出します。

注意点：<template> 内のコードが DOM にマウントされてから Matarialize が初期化される必要があるので、mounted メソッド内でなくてはいけません（created などではなく）。

以上、Nuxt.js アプリケーションで Materialize を利用する方法を紹介しました。プラグインを使う方法は Materialize 以外のライブラリの場合でも応用できそうです。

Nuxt.js

Nuxt.jsとMaterializeを組み合わせる方法

目次

スタイルシート

nuxt.config.js

プラグイン

ページコンポーネント