Help us understand the problem. What is going on with this article?

Vue.jsとMaterializeを組み合わせてはイケない理由

More than 1 year has passed since last update.

はじめに

Vue.js使ってますか???

とっても便利ですよね!

今回はマテリアルデザインのCSSフレームワークの
Materialize(マテリアライズ)
https://materializecss.com/

を導入しようとしたけど、やめた話です。

まず、どんな経緯だったかというと「ちっちゃいサービス」を思いついたので
RailsとVueで作ろうと思ったわけです!

で特に画面のデザイン部分ですが、コンポーネントフレームワークのElement UI とかも良いかなと思ったけど、なるだけコンポーネントをライブラリに依存させないほうがいいかなと思って、マテリアルデザインをささっと導入しようと思ってMaterializeを選択しました!

それからどしたの

最初は良かったんです!
カラム構成で画面を整えつつ、ボタンとかもイケてる感じに簡単に実装できるので。
しかしFormパーツを作ろうとしてSelectのタグを配置した瞬間に異変に気づきます。

Selectが動かない、optionに並べた選択肢が出ない!?
なんでと思ってMaterializeのリファレンスを見たら、
初期化が必要という事でmaterializeのJS読み込むか、jQueryを導入しないといけないとの事!

いずれの方法でもVueのイベントサイクルに影響するとかReal DOMを取り扱うのに気が引けてしまって
結局導入をやめてElement UIを使う事にしました。

よくよく考えれば分かる事だったのと、気づいてから上手く外部JSを導入する方法を見つけた訳では無かったのでちょっと知見とかもフィードバックできずにごめんなさい。

Materiarizeを導入するためのnpm ライブラリもちらほらありましたが結局Elementに戻る形になってしまいました。

なので上手く利用できる人はいいですが、特別な理由がなければコンポーネントフレームワークの方が実は簡単に使えてるなと思った次第です。

お土産に他に使ってるコンポーネントフレームワークの紹介を置いていきます。

Vuetify

GoogleのWEBアプリっぽい管理画面の素材があって試しに導入するのも簡単です。
またサイトのサンプルの完成度が高く動作を確認しながら導入できるサンドボックスもあります。
全体的にフレームワークを導入しないといけないので部分的にコンポーネント利用するのには不向きだと思います。

https://vuetifyjs.com

neuwell
心理学部卒のエンジニアです。 バックエンド、サーバーサイド、インフラで得た知見とか疑問を書いていきます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした