【Vue.jsエラー】Error in created hook: "ReferenceError: axios is

編集

この記事の要点

コンポーネントの中で axios を使おうとしたが、その時点で axios が読み込まれていないのが原因
Laravel では app.js で bootstrap.js を読み込む記述（require('./bootstrap'); または import './bootstrap';）が抜けていることが多い
Vue CLI / Vite 単体のプロジェクトなら、使うファイルで import axios from 'axios' する
修正後は npm run dev / npm run build でビルドし直さないと反映されない
CDN で読み込んでいるなら、axios の script タグを自分のコードより前に置く

エラー内容

app.js:13672 [Vue warn]: Error in created hook: "ReferenceError: axios is not defined"
...
app.js:14935 ReferenceError: axios is not defined
    at VueComponent.getChannels (app.js:955)
    at VueComponent.created (app.js:943)
    at invokeWithErrorHandling (app.js:14901)
    at callHook (app.js:17252)
    at VueComponent.Vue._init (app.js:18034)
    at new VueComponent (app.js:18179)
    at createComponentInstanceForVnode (app.js:16328)
    at init (app.js:16159)
    at merged (app.js:16346)
    at createComponent (app.js:19005)

ブラウザの開発者ツールのコンソールに表示されます。「created フックの実行中にエラー: axios が定義されていません」という意味で、コンポーネントの created() から呼んだメソッド（この例では getChannels）の中で axios.get(...) を実行した瞬間に発生しています。

原因

JavaScript では、宣言もインポートもしていない名前を参照すると ReferenceError になります。axios はブラウザに最初から入っている機能ではないため、次のどれかで「使える状態」にしておく必要があります。

読み込み方	axios が使える範囲	よく使われる環境
`window.axios = axios` でグローバルに登録	登録後のすべてのコード	Laravel の標準構成（bootstrap.js）
各ファイルで `import axios from 'axios'`	インポートしたファイルの中だけ	Vue CLI・Vite のプロジェクト
CDN の script タグで読み込み	読み込み完了後のすべてのコード	ビルドツールを使わない構成

このうちどれも行われていない、または順序が逆になっていると、このエラーになります。

対処法

Laravel を使っている場合

Laravel の標準構成では、bootstrap.js の中で axios を読み込んで window.axios に登録しています。app.js で以下の文言が無ければ追加します。

// Laravel Mix 時代の app.js（CommonJS 形式）
require('./bootstrap');

// Vite を使う新しい Laravel の app.js（ES Modules 形式）
import './bootstrap';

ファイルの場所は、Laravel 5.6 以前は resources/assets/js/app.js、5.7 以降は resources/js/app.js です。あわせて bootstrap.js の中に axios の登録があるかも確認します。

// resources/js/bootstrap.js（Vite 構成の例）
import axios from 'axios';
window.axios = axios;

node_modules に axios が入っていない場合は npm install（または npm install axios）を実行します。

Vue CLI / Vite 単体のプロジェクトの場合

axios をインストールし、使うコンポーネントでインポートします。

npm install axios

import axios from 'axios';

export default {
  data() {
    return { channels: [] };
  },
  created() {
    this.getChannels();
  },
  methods: {
    async getChannels() {
      const res = await axios.get('/api/channels');
      this.channels = res.data;
    },
  },
};

すべてのコンポーネントで this.$axios として使いたい場合は、エントリーファイル（main.js など）で登録します。Vue 2 は Vue.prototype.$axios = axios;、Vue 3 は app.config.globalProperties.$axios = axios; です。

CDN で読み込んでいる場合

axios の script タグを、Vue や自分のコードを読み込む script タグより前に置きます。後ろに置くと、自分のコードが実行された時点ではまだ axios が存在しません。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="/js/app.js"></script>

直したのに変わらないときの確認ポイント

ビルドし直したか: app.js を修正しても、Mix なら npm run dev、Vite なら npm run dev の起動または npm run build をしないと、ブラウザに配信される JavaScript は古いままです
ブラウザのキャッシュ: スーパーリロード（Ctrl+Shift+R など）で読み込み直します
Blade で正しいファイルを読み込んでいるか: Mix 構成なら <script src="{{ mix('js/app.js') }}"></script>、Vite 構成なら @vite(['resources/js/app.js']) がレイアウトにあるか確認します
ESLint の no-undef: ビルド時に 'axios' is not defined と出るのは ESLint の警告です。グローバル変数として使っているなら、インポートに書き換えるのが確実です

確認方法

ブラウザのコンソールで typeof axios と入力し、'function' と表示されればグローバルに読み込まれています（インポート方式の場合は 'undefined' でも正常です）。ページを再読み込みしてエラーが消え、開発者ツールのネットワークタブに API へのリクエストが表示されれば解決です。

ページ一覧

その他