How to get data from Laravel backend and display in Vue/Nuxt frontend

Question

I have a Vue/Nuxt frontend, which functions as it should, and a Laravel backend that is connected to my database.

My problem is how to connect the two and display data from the db in my Vue page.

If I run the app using php artisan serve I get the correct data from the db, but I can't use Nuxt/Vue's page-transitions and component-only refresh. If I run the app using npm run dev I get the page-transitions and component-only refresh but the data returned from my Axios request is the HTML of the sending page.

So I'm assuming it's some kind of async issue but I'm very new to this and have no idea what to do.

Any tips or advice would be a huge help.

Axios request:

created() {
    const { data } = this.$axios
      .get("/items")
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  },

I haven't included my controller, model etc. as it functions through the Laravel server so I'm assuming they're setup fine. Though, if needed I can edit them into the post.

Answer 1

You have to use the package dotenv . Then on the first line of nuxt.config.js:

require("dotenv").config()

And here is my axios setup in nuxt.config.js:

/*
   ** Axios configuration
   */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    baseURL: process.env.BASE_URL,
    headers: {
      common: {
        Accept: "application/json"
      }
    }
  },

This works fine for me. If you still can't recieve the API data, check in the network tab from the Developer Tools. Check if any request is fired and if so, check the url and possible response if there is any.