pixelfed/resources/assets/js/components/Stories.vue

<template>
	<div>
		<div class="card stories-card">
			<div class="card-header bg-white">
				<p class="mb-0 d-flex align-items-center justify-content-between">
					<span class="text-muted font-weight-bold">Stories</span>
					<a class="text-dark small" href="/account/activity">See All</a>
				</p>
			</div>
			<div class="card-body loader text-center" style="height: 120px;">
				<div class="spinner-border" role="status">
					<span class="sr-only">Loading…</span>
				</div>
			</div>
			<div class="card-body pt-2 contents" style="max-height: 120px; overflow-y: scroll;">
				<div id="stories">

				</div>
			</div>
		</div>
	</div>
</template>

<style type="text/css" scoped>

</style>

<script type="text/javascript">
	export default {
		data() {
			return {
				stories: [],
			}
		},

		beforeMount() {
			//this.fetchStories();
		},

		mounted() {

		},

		methods: {
			fetchStories() {
				axios.get('/api/v2/stories')
				.then(res => {
					this.stories = res.data;
					$('.stories-card .loader').hide();
					var stories = pixelfed.stories.create('stories');
					stories.update(this.stories);
				});
			}
		}
	}
</script>