⇨ Laravel 記事の目次はこちら

Laravel で Vue コンポーネントを使用する時、階層を絶対パスにしておくと、プロジェクトが大きくなった後フォルダ構成を変えたりする時に便利なのでその設定方法の記事です。

いきなり結論

webpack.mix.js に下記を追記

mix.webpackConfig({
  resolve: {
    alias: {
      "@": path.resolve("./resources/js"),
    },
  },
})

以上です！

Laravel のバージョンによっては、

"./resources/assets/js"

かもしれません。

このように書くと、js/components/AppComponent を

import AppComonent from "@/components/AppComponent"

と書いて import することができるようになります。

まとめ

いかがでしたか？

以上が、Laravel プロジェクトに入れた Vue コンポーネントを絶対パスで指定する方法になります。