How to use my custom API with Vue Metronic template Axios

Question

I've trouble when using Template Metronic Vue (demo 7). I've difficult with using login/register default Metronic Template, so I want to make my custom Login/register and another method CRUD with Laravel MIX API, But when I requested API with Axios, the request always catch Error.

is there any special method when I access custom API in Metronic templates?

In this code, I want to try console.log(). This is code :

<b-form class="form" @submit.stop.prevent="onSubmit">

    <b-form-input
    class="form-control form-control-solid h-auto py-5 px-6"
    type="email"
    v-model="this.form.email"
    ></b-form-input>

    <b-form-input
    class="form-control form-control-solid h-auto py-5 px-6"
    type="password"
    v-model="this.form.password"
    ></b-form-input>

    <button type="submit" class="btn btn-primary font-weight-bold px-9 py-4 my-3 font-size-3">
    Sign In
    </button>
</b-form>

<script>
import axios from 'axios'

export default {
    name: 'login',
    data() {
        return {
            form: {
                email: '',
                password: ''
            }
        }
    },
    methods: {
        onLogin() {
        axios.post('http://localhost:8000/api/getUser')
            .then(response => 
            console.log(response)
            })
            .catch(error => {
            console.log('error created')
            console.log(error)
            })
        }
    }
}
</script>

postman console

Answer 1

To use this code you should remove two things:

1. Remove MockService initialization from the main.js

// Remove this to disable mock API
MockService.init();

2. Remove API initialization from the main.js

// API service init
ApiService.init();