Use Moment Js In Laravel 8 With Vue 3 And Breeze Inertia - FreeCodeBlog

Last updated: Jan 04, 2022

Laravel 8 breeze moment js with vue 3! Want to use moment js in laravel 8 vue 3 with laravel breeze inertia js? Yes! Okay sometimes you may need to use moment js to make human readable date time in laravel 8 and vue 3. Laravel breeze inertia doesn't use moment js in vue file to make human readable date time. So you need to add manually moment js in laravel breeze inertia vue package. In this tutorial I will install and use breeze vue inertia version authentication package. After making this tutorial I will share source code with you that you can easily use moment js in laravel breeze inertia vue project.

 

Use Moment Js In Laravel 8 With Vue 3 And Breeze Inertia
Use Moment Js In Laravel 8 With Vue 3 And Breeze Inertia

 

1. Laravel Breeze.

I told you before that I will use laravel breeze user authentication package to use moment js in vue file. For this tutorial you need to install laravel breeze package. Don't know how to install laravel breeze package? No! Okay don't worry friends, I already make a tutorial about laravel breeze installation. Now just you need to read install laravel breeze authentication first party package tutorial if you don't know about laravel breeze authentication. 

 

2. Install Moment Js.

You can't use moment js in laravel breeze vue without install moment js. So want to use moment js in laravel breeze vue? Yes! Okay then you need to install moment js via npm in your breeze laravel inertia laravel project to use moment js in laravel with vue. Moment js not installed yet? No! You must need to install moment js in laravel breeze vue inertia otherwise you may not available to use moment js information in vue js file. So first moment js installation is too important to continue this implement moment js tutorial. You can easily install moment js in laravel using npm command to use human readable date time in breeze vue js file because moment js installation process is too simple. Needed source code of this tutorial? Don't worry friends, you will source code on my GitHub repository.

 

npm install moment --save

 

3. Use Moment Js.

I hope you do install moment js in breeze vue 3 laravel inertia project. Now you need to use installed moment js file in laravel app js file. It's to simple to use installed moment js file in laravel. Want to use moment js globally in laravel breeze package? Yes. Then you you need to use installed moment js files in laravel app.js file otherwise use it in vue 3 component where you want to use moment js time. I would recommend you to implement installed moment js in laravel app.js file globally so that you can make and use globally moment js date time in any vue js 3 component files. If you will add installed moment js file in laravel app.js file then It's will add moment js globally otherwise It's will add locally if you will add it's in any vue 3 component.

 

import moment from 'moment';

 

4. Make Global Properties For Moment Js.

I hope you like to use moment js in vue 3 files globally. Did you use installed moment js file in laravel app.js file globally? Yes! Okay want to access moment js time from any vue 2 component files? Yes! Okay then you need to create global property for moment js so that we can access it from any vue components. In laravel breeze inertia js vue 3 you need to access vue config global properties to return moment date time. So don't forget to return vue 3 create app to use config global property. If you return vue 3 create app like VueApp = createApp({}) then you can make moment js global property by access VueApp. You can easily define moment js global property in app.js file like $momentJs. In laravel breeze application you may not available to access VueApp = createApp({}) directly. So you should use config global properties after createApp and before mount it. Don't forget return global moment date time from config global properties to use it from vue 3 file.

 

/*
| Don't forget to use double second backet.
*/
$moment.formNow(your_date_time)
$moment.calendar(your_date_time)

 

5. Use Global Moment Time In Vue File.

Did you return global moment js date time from app js? Yes! Okay now it's time to use global moment js date time in laravel breeze vue 3 component file. Want to use global moment js date time in vue file right now? Yes. Actually It's too simple to use global date time in vue 3 file. Let's see 2 example global date time for vue 3 file.

 

 setup({ el, app, props, plugin }) {
const VueApp = createApp({ render: () => h(app, props) })
      .use(plugin)
      .use(moment)
      .mixin({ methods: { route } })
VueApp.config.globalProperties.$momentJS = {
 DateOne(created){
 return moment(created).fromNow();
 },
 DateTwo(time){
 return moment(time).calendar('DD/MM/YYYY');
}
};
VueApp.mount(el);
return VueApp;
    },

 

Okay so this is for today. See you again next tutorials. Thanks

Post Tags
Post Writer
masum7323
Masum Biswas (@masum7323)

My name is Masum Biswas. I'm a full stack developer. I live in Bangladesh and I love to write tutorials and tools that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, MySQL, VueJS, Tailwind CSS and Bootstrap from the early stage.

Follow Me On
Related Posts
Show And Hide Password In Laravel Vue

make show and hide password in laravel vue using laravel ui package. Sometimes, we may require to show hide password input field so, user can see w... Read More

How To Upload File On Laravel Vue

You need to read upload a file on laravel 8 vue 2 tutorial If you want to know how we can upload a image file in laravel 8 with vue 3. so guys, let... Read More

How To Use Ckeditor 5 In Laravel 8 With Vue 3

Laravel 8, Vue 3, Ckeditor 5. Do you really want to use ckeditor 5 on laravel 8 with vue 3? Yes. Do you know about ckeditor 5? A little bit. Ckedit... Read More

Laravel 8 User Phone Number Verification Using Nexmo And Breeze

Send a code sms to user phone number  for number verification when user will register with phone number in laravel 8. In this tutorial I will... Read More

Upgrade Laravel 5.8 To 8 Version Complete Tutorial

Want to upgrade laravel 5.8 to 8 version? Yes. Still using older Laravel versions like laravel 5.7, 5.8 or higher for your website? If you use a ve... Read More