How to retrieve and display Data from another website using Laravel API and Vuejs

In post video, you will learn how to read or get Data from another website using Laravel API and Vuejs (Axios). The following are the steps for getting data from another website and show on your website. Data Format we will receive from another Website is JSON Format.

  1. First set up Basic Vuejs in your project .for that watch this post. Click here
  2. we will use Axios for getting data dynamically that’s mean without loading your page .for that we need to install Axios using following line
  3. In resources/js/components/ExampleComponent.vue

    what’s happening here <script> import axios from ‘axios’ here we are importing axios package as axios and then when the component is rendered mounted() will be called.Inside mounted() function, via axios.get() we are getting the API data which we will display on our site. if you see in the browser you will find the following type JSON data.

    When the data will be rendered successfully .then() function will be called , otherwise if failed to load then catch() function will be called.

  4. run following in theĀ Terminal

    Finally, on the browser, you will find your desire data. You may face CORS Problem, here is the link for the solution.

Share with:

Comments are closed.