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


作ったやつ

VM=VueMaterialize

はじめに

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

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

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

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

Vue3でマテリアルデザイン

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

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

google material design

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

Materialize

これが使いやすそうだった、なんか有名らしいし
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を使いました

完成!


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

参考文献