Quality tutorials & resources. No BS._

Page 5

Custom Component v-model attribute with Vue 3
Author Dan Pastori avatar
Dan Pastori January 26th, 2022

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 […]

Keep Reading →
Break between articles
Append Gravatar Attribute to the Laravel Eloquent User Model
Author Dan Pastori avatar
Dan Pastori December 6th, 2021

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.

Keep Reading →
Break between articles
Fetch API Components with Vue 3 Composition API Part 4 of 4 in Using Fetch API with VueJS
Author Dan Pastori avatar
Dan Pastori November 29th, 2021

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!

Keep Reading →
Break between articles Break between articles
Sending POST, PUT, and PATCH Requests with Fetch API and VueJS Part 2 of 4 in Using Fetch API with VueJS
Author Dan Pastori avatar
Dan Pastori November 15th, 2021

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!

Keep Reading →
Break between articles
1 3 4 5 6 7 28