Vue.js MySQL CRUD REST API с PHP AXIOS

Question

Я пытаюсь настроить простой MySQL API на сайте Vue.js. Получение значений из базы данных MySQL через конечную точку Axios & PHP и их обслуживание в различных диаграммах / таблицах, таких как Charts.js Apexcharts и т. Д. Удар кирпичной стены при попытке интегрировать все, что связано с PHP, в шаблон Vue.js, который я использую &Мне нужна помощь, чтобы получить общее представление о том, что я задумала.

Я успешно создал простой CRUD API REST API с Vue.js и MySQL, используя Axios, но не могу заставить его интегрироваться в большийШаблон Vue.js при получении ошибок компиляции re: loaders.

Следовал этому примеру, чтобы настроить его просто из index.php или index.html с вызовом /api/contacts.php через Axios и приложение Vueкод, указанный в статье

<script>
var app = new Vue({
  el: '#vueapp',
  data: {
      name: '',
      email: '',
      country: '',
      city: '',
      job: '',
      contacts: []
  },
  mounted: function () {
    console.log('Hello from Vue!')
    this.getContacts()
  },

  methods: {
    getContacts: function(){
    },
    createContact: function(){
    },
    resetForm: function(){
    }
  }
})    
</script>

Когда я пытаюсь логически разбить фрагменты этого примера и вшить их в шаблон, который я использую - Vuexy Vue.js Admin Template - я получаю ошибки компиляции, говорящие:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, 
currently no loaders are configured to process this file. 
See https://webpack.js.org/concepts#loaders
> <?php
| $host = "198.154.xxx.xx";
| $user = "xxxxxxx_xxxx";

Я здесь упускаю что-то общее, я знаю, но информация об vue.js axios и php довольно ограничена AFAIK. Помощь будет так ценится.