Laravel ViteでMaterializeCSSをimportして使う方法

執筆日:
この記事の目次
chevron_right 結論
chevron_right 解説

結論

resources/js/app.js に以下の方法で呼び出し記述を書く

// もとからあるやつ
import './bootstrap';

// materialize
import { M } from "@materializecss/materialize/dist/js/materialize.js";
import '@materializecss/materialize/dist/css/materialize.min.css';

M.AutoInit();

解説

MaterializeCSSのJavaScript(以下JS)を使うには、
M.AutoInit()など、利用するJSの初期化のようなものが必要になる事が多い。

しかし、MaterializeCSSのJSはexport defaultされておらず、必ず命名があるようなので、
import M from "@materializecss/materialize/dist/js/materialize.js"の表記が使えない。

なので、以下のように必ず各機能のexport名を指定してあげる必要がある。

import { M } from "@materializecss/materialize/dist/js/materialize.js";
[PR] おすすめの本
この記事を書いた人
Nな人(えぬなひと)。
Nは本名から取っています。
Laravelが大好きなPHPerで、WEBを作るときはLaravelを技術スタックに絶対推すマン。
PHP、Pythonと、昔はperlを書いていたP言語エンジニア。
最近はNimを書いたりしています。