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 in Laravel by kartik
• 11,290 points
75 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 by Niroj
• 22,790 points

Related Questions In Laravel

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 in Laravel by Niroj
• 22,790 points
40 views
0 votes
1 answer

How to get user's IP address in Laravel?

Hey, We can get the user's IP address ...READ MORE

answered Mar 20 in Laravel by Niroj
• 22,790 points
370 views
0 votes
1 answer

What is database migration and How to create database migration in Laravel?

Hii, Migrations are like version control for your database, ...READ MORE

answered Mar 23 in Laravel by Niroj
• 22,790 points
55 views
0 votes
1 answer

How to make a constant and use globally in laravel?

Hii, You can create a constants.php page in config folder ...READ MORE

answered Mar 24 in Laravel by Niroj
• 22,790 points
34 views
0 votes
1 answer

How to make anchor tag with routing using Laravel?

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

answered Mar 18 in Laravel by Niroj
• 22,790 points
434 views
0 votes
1 answer

What is redirection in Laravel?

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

answered Mar 18 in Laravel by Niroj
• 22,790 points
62 views
0 votes
1 answer

How to install Laravel via composer?

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

answered Mar 23 in Laravel by Niroj
• 22,790 points
64 views
0 votes
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 in Laravel by Niroj
• 22,790 points
151 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 in Laravel by Niroj
• 22,790 points
224 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 in Laravel by Niroj
• 22,790 points
58 views