I need help about Axios. I develop a SPA webapp on Laravel 6 (with package SPARK) and VueJS (version 2).

On a Vue component, I want to retrieve datas from my bdd. So, I use Axios to make a get request on an API uri. But, when I call Axios request, data field in Response object is a HTML code.

This is my code :

routes/web.php

Route::get('/', function(){
    return view('welcome');
});

Route::middleware('auth')->get('/{any?}', function (){
    return view('documents');
})->where('any', '[\/\w\.-]*');

The "welcome" view is a blade page where redirect on "/login" if user is not authenticate. Otherwise, it redirect on "/home". The link "/home" is define on vue-router in app.js. The other route is the unique way to display the webapp (it's a single page application). The Vue instanciation is in "passeport" view.

resources/js/app.js

import 'es6-promise/auto'

require('spark-bootstrap');
require('./components/bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);

Vue.component('index', require('./components/pages/index').default);

import Dashboard from './components/pages/dashboard.vue';
...

const routes = [ 
    {
        name: 'dashboard',
        path: '/home',
        component: Dashboard,
    },
    {...}
]

const router = new VueRouter({ 
    history: true,
    mode: 'history', 
    routes: routes
});

var app = new Vue({
    mixins: [require('spark')],
    router,
});

router package is added in Vue instanciation. it is in the same context than spark component (identify by the #spark-app element)

resources/views/documents.blade.php

@extends('spark::layouts.app')

@section('content')
    

        
    
@endsection

It is the view returned for any path. In the spark::layout.app, there is only a div with id="spark-app" and the @yield('content').

resouces/js/components/pages/index.vue

.
.

It's just the vue component with the router-view configure with a layout.

resources/js/components/pages/dashboard.vue

Here, I call the documentslist API define in routes/api.php.

routes/api.php

Route::middleware('auth:api')->group(function () {
    Route::get('/user', function (Request $request) {
        return $request->user();
    });
    Route::get('/documentslist', 'DocumentController@list');
});

app/http/Controllers/DocumentController.php

...
public function list(Request $request){
   return DocumentCollection(Document::all());
}
...

When I go to "/home", I verified "documents" data in Vue (or in the javascript console log), and response.data = "\r\n\r\n\r\n (...) v-if=\"notification.creator\" :src=\"notification.creator.photo_url\" class=... (10024 total length)"

But, list method in DocumentController have to return a list of documents, and not a HTML code.

Furthermore, I use Passport Laravel to unified authentication by login and the API token. And the Axios request work in the same project without SPA structure.

I hope I'm clear in the problem explanation, and that I forget any detail to understand.

Thanks.