front/messages-list.html

<!DOCTYPE html>
<html>
<head>
	<title>Scratchy</title>
	<script src="https://unpkg.com/vue@next"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js "></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/fr.min.js"></script>
	<link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/messsages-list.css>
	<meta charset="utf-8">
</head>
<body>
	<div id="app">
		<messages v-bind:messages="apiMessages"></messages>
	</div>
	<script type="text/javascript">
		const main = {
			data(){
				return {
					apiMessages: [
				      {id : "459I548383",content: "Bonjour tata", author: "toto",  timestamp: 1618587750035},
				      {id : "4459493924",content: "Salut toto", author: "tata",  timestamp: 1618587750035 },
				      ]
				}

			}	

		};
		const messages = {
			name: 'messages',
			props: ['messages'],
			methods: {
				humanDate(ts){
					return moment(ts).fromNow();
				}
			},
			template: `
			<ul class="messages_list_wrapper">
				<li v-for="msg in messages" class="messages_item" :key="msg.id">
					<div class="messages_title">
						<span class="messages_author"> {{msg.author}} </span>
						<span class="messages_timestamp"> {{humanDate(msg.timestamp)}} </span>
					</div>
					<div class="messages_content">
						{{msg.content}}
					</div>
				</li>
			</ul>
			`,
		};
		app = Vue.createApp(main);
		app.component('messages',messages);
		app.mount('#app');
	</script>
</body>
</html>