More than 3 years have passed since last update.

Vue.js3とMaterializeでモダンな掲示板を作った話

Posted at 2021-05-01

作ったやつ

VM＝VueMaterialize

かっちょいいデザインのウェブサイトを作りたかった

仕事で使っているのは、みんな大好きBootStrap
でもやっぱり、ダサいなと（カスタムする力がないからかもしれないけど）

手軽にかっちょいいデザインに出来ないかなと思って調べてみた
すると、マテリアルデザインというものを発見。
Googleが提唱した！Googleが提唱した！って色んな所に書いてあるので調べてみてください

それで、Vueで出来ないかなと思って調べてみました

Vue.jsで一番人気のマテリアルデザインフレームワークはVuetifyらしい
ただ、これがVue3に対応しておらず（2021/3Qに対応予定）
フレームワークに密結合してしまっているのも使いたくないなと思いました

そこで、マテリアルデザイン単体のフレームワークを調べてみました

Googleが提唱しているって言うんで、さぞかし使いやすいんだろうなと思って
サンプルコードを覗いてみましたが、ボタンを作るだけで6行くらい書かないと実装できず、これはないなと思いました

これが使いやすそうだった、なんか有名らしいし
class名でコンポーネントを紐付けるというのもBootStrapみたいで良いなと思ったのでこれに決定

1.Materializeをインストール

npm install materialize-css@next

2.main.ts(js)でCSSをImport

typescript.main.ts

import 'materialize-css/dist/css/materialize.min.css'

これで、基本的なCSSは有効になります

ただ、マテリアルデザインのボタンをタップしたときの波紋やら、ハンバーガーメニューを開いたりとか(javascriptを使う)動的な動作が有効になっていない状態です

3.javascrip有効化
公式にInitializeする必要があると書いてあるので、します
共通コンポーネントのApp.Vueでやります

vue.App.vue

import M from "materialize-css";
export default defineComponent({
  name: "App",
  mounted() {
    M.AutoInit();//MaterializeのInitialize
  }
});

ここまで来ると、Materializeの機能が全部使えるようになっています

4.内部実装
HostingはFirebaseDBはRealTimeDatabseを使いました

さすがマテリアルデザイン。
フォームをクリックしたとき、ボタンを押したとき、エフェクトが気持ちいい！