cretueusebiu / laravel-nuxt

A Laravel-Nuxt starter kit.
https://laravel-nuxt.cretueusebiu.com
MIT License
1.15k stars 262 forks source link

More a question than an Issue. #133

Closed irving-caamal closed 3 years ago

irving-caamal commented 3 years ago

How do you pass data from laravel backend to nuxt.js?

I'm assuming that is with fetch or axios calls, creating api endpoints in laravel.

Am I correct?, thank yo so much!.

carcinocron commented 3 years ago

This should get you started: https://nuxtjs.org/docs/2.x/features/data-fetching/

rudolfbruder commented 3 years ago

Indeed you need to make and Axios call to your api. I think there is already a this.$http prototype created fro axios.

irving-caamal commented 3 years ago

This should get you started: https://nuxtjs.org/docs/2.x/features/data-fetching/

Is not related with nuxt, Im talking about if it's possible pass the data like a prop or is with a normal fetch request

carcinocron commented 3 years ago

If I were loading data without using a nuxtjs feature, this is how I would start:

<template>
  <div v-if="busy">
    Loading
  </div>
  <div v-else>
    Loaded!
    <OtherComponent :data="loadedData"/>
    <pre>{{ JSON.stringify({ loadedData }) }}</pre>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      busy: false,
      loadedData: null,
    };
  },
  async mounted() {
    try {
      this.busy = true;
      const response = await axios.get('/api/my_endpoint');
      this.loadedData = response.data;
    } finally {
      this.busy = false;
    }
  },
};
</script>
irving-caamal commented 3 years ago

I think this will go with regular fetch and axios requests, with normal endpoints in our Laravel API.

for more information: I was thinking of passing data like Inertia.js something like this.