The core of VueJS and why it’s so awesome is the ease of making reactive interfaces. To watch input on an element you can use the v-model attribute. This attribute will automatically update when the user changes a value. However, when you start to create more advanced VueJS functionality, you will want to abstract that […]

There are so many useful tricks when it comes with working with Laravel Eloquent. This is one of my favorites. It allows you to simply make a computed attribute on the User model that returns the user’s Gravatar URL. Best part? It’s only a few lines of code. Let’s jump in!

Step 1: Open Your User Model

First, you need to open your user model. In Laravel 8 this should be in the app/Models directory.

Step 2: Append Gravatar Attribute

All you need to do now is append the attribute for the computed Gravatar URL:

public function getGravatarAttribute()
{
    return '<https://www.gravatar.com/avatar/>'.md5( strtolower( trim( $this->email ) ) );
}

What this does is uses the Eloquent syntax to create an attribute. When returned, the field gravatar will be populated with the URL of the user’s gravatar if they have one. Gravatar returns a default icon if the URL doesn’t map to a user. This is great so you always have an empty state in place when it comes to implementing this in your app.

One of the biggest pain points I see between using the Fetch API and Axios is the way Fetch is configured out of the box. I love the power, but Axios comes with some default config and a way to make it easy to set global settings. I want to see if I can abstract some of the settings that are generally used across all API requests and make them reusable with the Fetch API. I’m going to structure this reusability similar to building an API wrapper with axios. The main difference (besides using Fetch instead of Axios), is we are going to implement these methods using the new Vue 3 Composition API!

We’ve talked about file uploads with Axios a ton of different ways. Since we are just comparing the Fetch API with Axios, I won’t do as many examples. However, we will touch on the differences between the Fetch API and Axios when uploading files. Once again, if you want to see exactly how this component works, check out our GitHub repo.

In the last tutorial, we covered the differences between the Fetch API and Axios when sending a GET request. Let’s take it up another notch and send POST, PUT, and PATCH requests with the Fetch API and compare how these methods operate compared to an Axios request.

If you want to jump ahead and see the answer, check out the Github repo for this component here. You can see the differences right away. If you want to see how this works, keep reading!