Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Shiva's avatar
Level 5

ReferenceError: axios is not defined

I'm getting this error when I try to submit a form using vue

ReferenceError: axios is not defined

I don't know why this is happening. Isn't axios already imported in the bootstrap.js that's in the resources/js/ folder?

Here is my vue file

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an Supplier Code Selection component.
                        <br>
                        
                        <form @submit.prevent="submit">
                            <label for="parent-product">Parent Product</label>
                            <select name="parent-product" id="parent-product" class="form-control" v-model="selected_parent">
                                <option>Please select your code</option>
                                <option v-for="product in products" :value="product.id">
                                    {{ product.supplier_code }}
                                </option>

                                    <option v-for="child in children" :value="child.id">
                                        {{ child.supplier_code }}
                                    </option>
                            </select>

                            <input type="submit" class="btn btn-primary" value="Submit">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: [
            'products',
            'children',
            'selected_parent'
        ],

        mounted() {
            console.log('Component mounted.')
        },

        methods: {
            submit(){
                var formData = new FormData();

                console.log('this is the select box - '+this.selected_parent);
                formData.append('parent-product', this.selected_parent);

                return axios.post('/add-to-cart/'+this.selected_parent, formData);
            }
        },
    }
</script>

0 likes
4 replies
tykus's avatar

If you are requiring the bootstrap.js file into app.js, and in there axios is being assigned to the window object, then you should expect to see it.

Don't forget that you can import axios into the component directly as well.

//
</template>
<script>
    import axios from 'axios'
    export default {
        props: [
            'products',
            'children',
            'selected_parent'
        ],
//
STEREOH's avatar

you have to import it to be able to use it.

Assuming you already installed it with npm.

<script>
import axios from 'axios';
Shiva's avatar
Level 5

yep I had to import axios, because I had removed require('./bootstrap'); from my app.js. Thanks guys

tykus's avatar

Very good. Please mark the best reply above.

Please or to participate in this conversation.