Nuxt.js で materialize 使うためセットアップのメモ

更新2018-07-23 19:20: 挙動がおかしいのでほぼまるまる修正

前提
nuxt.config.js
pages/index.vue
確認
参考サイト

前提

nuxt1.4.1 インストール済みで npm run dev できる状態
materializeのCSSとJSが適応されているか確認するためモーダル表示してみる

nuxt.config.js

npm のライブラリ使うと古いバージョンで動かなかったりするのでCDN利用する

  head: {
    title: 'hoge-project',

...

    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' },
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css' },
    ],
    script: [
      { src: 'https://code.jquery.com/jquery-2.1.1.min.js' },
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js' },
    ],
  },

pages/index.vue

<template> と <script> に Modal の記述を追記

<template>
  <section class="container">
    <div>
      <app-logo/>
      <h1 class="title">
        example-vue
      </h1>
      <h2 class="subtitle">
        Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
      </div>

      <!-- Modal Trigger -->
      <a
        class="waves-effect waves-light btn modal-trigger"
        href="#modal1">Modal</a>
      <!-- Modal Structure -->
      <div
        id="modal1"
        class="modal">
        <div class="modal-content">
          <h4>Modal Header</h4>
          <p>A bunch of text</p>
        </div>
        <div class="modal-footer">
          <a
            href="#!"
            class="modal-close waves-effect waves-green btn-flat">Agree</a>
        </div>
      </div>

    </div>
  </section>
</template>

<script>
import AppLogo from '~/components/AppLogo.vue'

export default {
  components: {
    AppLogo
  }
}
// Use Materialize Modals
if (process.browser) {
  window.onNuxtReady(() => {
    $('.modal').modal();
  });
}
</script>