I want to make an Ajax call using Axios in Laravel 10 with Vite (I don't use VueJs). I get the error "axios is not defined".
My view :
<x-app-layout>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
hello world
</div>
</div>
</div>
<script>
axios.get("{{route('scann','xxx')}}"
).then(function(rep){
console.log(rep)
})
</script>
</x-app-layout>
in the layout I have included css and js before closing header with :
@vite(['resources/css/app.css', 'resources/js/app.js'])
app.js :
import './bootstrap';
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
bootstrap.js :
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
It's likely that app.js
isn't loaded until after the script tag in your view (Vite scripts are type="module"
by default, so loading is deferred). Try waiting until the DOM is loaded:
<script>
document.addEventListener('DOMContentLoaded', () => {
axios.get('/some-endpoint')
.then(response => console.log(response))
.catch(error => console.error(error));
});
</script>