Materialize でmodalが開かない解決策

結論

Bootstrapとは違って、modalの初期化が必要
画面読み込み時に以下のコードを実行。
よく見たら公式ドキュメントに書いてある。

  // 素のJS
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, options);
  });

  // 以下jQuery
  $(document).ready(function(){
    $('.modal').modal();
  });

その他

Nuxt.jsでMaterializeを使うときの設定メモ

npm i materialize-css

npm i jquery

を忘れずに。

const pkg = require('./package')
const webpack = require('webpack')

module.exports = {

  /*
  ** Headers of the page
  */
  head: {
    ....
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#3B8070' },

  /*
  ** Global CSS
  */
  css: [
    'materialize-css/dist/css/materialize.css'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    ....
  ],

  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
  ** Build configuration
  */
  build: {
    vendor: ['jquery', 'materialize-css'],
    plugins: [
      // set shortcuts as global for bootstrap
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ],
  ....
  }
}