Laravel, VueJS, and Carbon

I am building an extremely simple blog, that only I can write posts for (my personal website).

I would like to use VueJS so I can take advantage of filters.

I would like to load all posts (maybe infinite scroll) or just get all the titles, and load the body of the blog post when needed.
When I have played around with Laravel and VueJS, I can use v-repeat which is great and I can get things like the published_at timestamp, however, how do I use Carbon with it? Things like published_at->diffForHumans()?

I'm looking for some advice; is this even possible (referring to using Carbon too)?

Level 52

Carbon is a php package, you cant use it in client. There are some Javascript libraries like moments and XDate.

1 like

Level 55

Thanks for your reply, I totally forgot about doing it client side, it will be a nice touch too as it can be updated without refreshing the page.

With regards to infinite scroll and potentially loading the body of the blog post when it is needed, how would you go about that?

I have looked at jScroll and Infinite Scroll but haven't got either of them working.

Level 22

Check https://github.com/flarum/core they advertise infinite scroll ... the code looks very nice.

Level 55

@Bloomanity, that looks really nice. Thanks for that! :)

Level 1

Level 47

use moment.js in your vuejs file

<script setup>
import moment from 'moment'
</script>
<template>
	<div>
		{{ moment(your timestamp).fromNow() }}
	</div>
</template>

Please or to participate in this conversation.