[Laravel7]カラーピッカーのSpectrum.jsを使おうとしたらUncaught ReferenceError: $ is not definedが出たりしたけど解決した話

この記事で書いているLaravelはphp artisan ui vue —auth を実行してvueは有効なままの状態です。

何をしたかったか

入力フォームの中にカラーピッカーを追加したかったんですよ。

input type=”color”は使い勝手がイマイチだと感じたのでhttps://bgrins.github.io/spectrum/を使おうと思ったんですね。

単にbladeでcssとjsを読み込んだだけでは

Uncaught ReferenceError: $ is not defined

ですよ。

結論

もしかしたら他に正解があるかもしれません、ということはお伝えしておきます。(僕もLaravelを試行錯誤している身ですので)

１．resources/jsにspectrum.jsを配置します。

２．resources/js/app.jsに以下を追記します。

require('./spectrum');
$(".picker").spectrum({  
    //color: "#f00", //初期色  
    showPalette: true, // パレット表示あり  
    palette: [ // パレットで使う色を指定  
        ["#f00", "#0f0", "#00f", "#ff0", "#f0f", "#0ff"]  
    ],
    preferredFormat: 'Hex'
});

３．npm run devを実行します。

４．あとはいつもの感じ

bladeのほうでは以下のような感じでCSSを読み込むのと

<link rel=”stylesheet” type=”text/css” href=”https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css”>

app.jsに追記した内容と合わせるように入力欄にclass=”picker”を指定してください。

これで僕は動きました。

もしかしたら上記はVueを有効にしている場合の対応方法かもしれません。対応方法を調べる中でLaravel-Mixというjsとかをまとめてくれるようなもので導入するんだ！というような記事も見つけました。

Laravel-Mixをご存知でない方はそのあたりも調べてみてください！僕も調べてみます！

ではまた。