Github Gist in a Nuxt3 Project with storyblok

So I had the brilliant idea to add support for Github Gists in my portfolio, but to do this I need to add a block in storyblok and also make it work for Nuxt3.

To render the Gist I went with https://github.com/sudhanshu-15/vue-embed-gist to render it, but since I use Nuxt3 I need to do some magic.

To add support to add a gist in my blog system, I added a new block called "Github Gist" that I add through the UI and then add the gist-id and the file name I want to show.

Since there is no Nuxt3 module or similar for a github gist embed, I made my own. Here is the full code:

	<script setup lang="ts">
	const props = defineProps({
	gistId: {
	type: String,
	required: true,
	},
	file: {
	type: String,
	required: false,
	default: '',
	},
	});

	const gistUrl: string = 'https://gist.github.com/';
	const gistErr: boolean = false;

	const { data: result } = await useAsyncData(
	`gist-${props.gistId}-${props.file}`,
	() => {
	const params = props.file.length > 0 ? `?file=${props.file}` : '';
	return $fetch(`${gistUrl}${props.gistId}.json${params}`);
	},
	);
	</script>

	<template>
	<div>
	<div v-if="gistErr">
	<img
	id="notFound"
	height="100%"
	width="100%"
	src="https://user-images.githubusercontent.com/883233/102043641-d4817580-3d89-11eb-885d-2786373932d4.png"
	alt="404"
	>
	</div>
	<div v-else v-html="result.div" />
	</div>
	</template>

	<style scoped>
	@import url("https://github.githubassets.com/assets/gist-embed-4ac6018bcc05457cde2f66d2e7299d11.css");
	@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
	</style>

view raw GithubGistEmbed.vue hosted with ❤ by GitHub

- 2022-07-21 16:19