How to Format Date in Vuejs Laravel without Moment.js

1 year ago admin Vuejs

When you are working with Laravel and Vue js and you want to display the created_at date time you need to format the value to be human-readable, sometimes you prefer to use a library like moment.js, but today we are going to see how we can do that without moment.js.


Use laravel accessor to format the created_at attribute

So to format the created_at without Moment.js we use Laravel accessor which is called automatically when attempting to retrieve the value of the created_at attribute, once done you can display created_at human-readable in your Vue js component.

                                                        
                                                                                                                        
<?php

namespace App\Models;

use Carbon\Carbon;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;

    public function getCreatedAtAttribute($value){
        return Carbon::parse($value)->diffForHumans();
    }
}

Related Tuorials

How to Get URL Query Params in Vue 3 Composition API

In this lesson, we will see how to get URL query params in Vue 3 composition API, let's assume that...


How to Use Vue js 3 to Generate Random Passwords

In this tutorial, we will see how to use Vue js 3 to generate random passwords, so our application w...


How to Load More Data on a Button Click Using Vue js 3

In today's lesson, we will see how to load more data on a button click using vue js 3, let's assume...


How to Display Images from Laravel Public Folder in a Vue Component

In this lesson, we are going to see how to display images from Laravel public folder in a Vue compon...


Create a Custom 404 Component using Vuejs 3

In today's lesson, we are going to see how to redirect a user to a custom 404 Vue Component if a rou...


How to Add an Auth Middleware with Vue-router

In this lesson we are going to see how to make an auth middleware using vue-router, the middleware w...


Shopping Cart Using Vue js 3 Composition API and Pinia Part 2

In the second part of this project, we will add the home component, and display the products, we wil...


Shopping Cart Using Vue js 3 Composition API and Pinia Part 1

In today's tutorial, we are going to create a shopping cart using Vue js 3 composition API and pinia...


How to Get Query Params in Vue.js 3 Composition API

In this lesson, we are going to see how to get query params using Vue js 3 composition API, let's as...


How to Update an Object's value in Array in Vue js 3

Let's assume that we are working in a shopping cart with Vue js 3, the user adds items to the cart,...