To be up front, this tutorial is guided at users who are entirely new to Statamic. The documentation on all of these concepts is incredible. Where I stumbled was just tying everything together. I’m also coming from a WordPress background and it really being the only CMS I know. I’ve been developing Laravel apps for about 8 years now and is one of the reasons I was so interested in Statamic. So what my intent is with this tutorial is to explain these aspects through my understanding. I will relate these to anyone coming from a WordPress background to hopefully bridge that gap.

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.