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

0 votes

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.

Apr 8, 2020 in Laravel by kartik
• 37,490 points
1,302 views

1 answer to this question.

0 votes

Hello,

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.

Hope this works!!

Thank You!!

answered Apr 8, 2020 by Niroj
• 82,560 points

Related Questions In Laravel

0 votes
1 answer

How to select year and month from the created_at attributes of database table in laravel 5.1?

Hello @kartik, There are date helpers available in ...READ MORE

answered Sep 30, 2020 in Laravel by Niroj
• 82,560 points
990 views
0 votes
1 answer

How to get image from resources in Laravel?

Hello @kartik, You can make a route specifically ...READ MORE

answered Oct 28, 2020 in Laravel by Niroj
• 82,560 points
191 views
0 votes
1 answer

How to get view data during unit testing in Laravel?

Hii, Try this: $response->getSession()->get("errors") And from there you can check ...READ MORE

answered Nov 2, 2020 in Laravel by Niroj
• 82,560 points
147 views
0 votes
1 answer

How to identify wheather the request is HTTP GET or HTTP POST in Laravel?

Hey, In order to identify the type of ...READ MORE

answered Mar 19, 2020 in Laravel by Niroj
• 82,560 points
211 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,560 points
5,573 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,560 points
645 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,560 points
492 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,560 points
6,157 views
0 votes
1 answer

How to pass data through URL and access through controller in Laravel?

Hello, You can  first refer how to  Create controller through ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,560 points
4,981 views
0 votes
1 answer

Explain validations in laravel and How to validate my application incoming data?

Hey @kartik, In Programming validations are a handy ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,560 points
188 views