Nuxt/image

components/Base/Card.vue

@@ -45,7 +45,7 @@ defineProps<BaseCardProps>();
 	<div class="base-card">
 		<NuxtLink :href="href">
 			<div class="image">
-				<img :src="img" :alt="title" loading="lazy" />
+				<NuxtImg :src="img" :alt="title" loading="lazy" />
 			</div>
 			<div class="content">
 				<div>

components/Block/MediaFullWidth.vue

@@ -18,14 +18,14 @@ const imgSrc = computed(() => {
 	const imageId = unref(block)?.image?.id;
 	if (type !== 'image' || !imageId) return null;
 
-	return getFileUrl(imageId);
+	return imageId;
 });
 </script>
 
 <template>
 	<BaseFrame v-if="block" aspect="16-9" variant="frosted" color="white">
 		<BaseVideo v-if="block.type === 'video' && block.video" :url="block.video.url!" />
-		<img v-else-if="block.type === 'image' && block.image" :src="imgSrc!" :alt="block.image.title" />
+		<NuxtImg v-else-if="block.type === 'image' && block.image" :src="imgSrc!" :alt="block.image.title" />
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<div v-else-if="block.type === 'embed' && block.embed" v-html="block.embed" />
 	</BaseFrame>

components/Block/Showcase.vue

@@ -96,7 +96,7 @@ onBeforeUnmount(() => {
 			<div class="transition-group">
 				<template v-for="(item, itemIdx) in block.items" :key="item.id">
 					<div class="image-container" :class="{ 'is-active': selectedIdx === itemIdx }">
-						<img :src="getFileUrl(item.image?.id)" :alt="item.image?.description ?? undefined" />
+						<NuxtImg v-if="item.image" :src="item.image?.id" :alt="item.image?.description ?? undefined" />
 					</div>
 				</template>
 			</div>
@@ -127,6 +127,11 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+.block-showcase {
+	position: relative;
+	width: 100%;
+	overflow: hidden;
+}
 .showcase-buttons {
 	position: relative;
 	display: grid;

components/Card/Gray.vue

@@ -9,14 +9,13 @@
 }
 
 const props = defineProps<CardGrayProps>();
 
-const fileUrl = computed(() => getFileUrl(props.image));
 </script>
 
 <template>
 	<div class="gray-card">
 		<div class="gray-card-header">
-			<img :src="fileUrl" :alt="title" height="50" />
+			<NuxtImg :src="props.image" :alt="title" height="50" />
 
 			<div>
 				<BaseHeading v-if="title" size="medium" :content="title" />

components/Card/White.vue

@@ -10,14 +10,12 @@ export interface WhiteCardProps {
 }
 
 const props = defineProps<WhiteCardProps>();
-
-const fileUrl = computed(() => getFileUrl(props.image));
 </script>
 
 <template>
 	<NuxtLink :href="href" class="white-card">
 		<div class="white-card-header">
-			<img :src="fileUrl" :alt="title" height="50" />
+			<NuxtImg :src="props.image" :alt="title" height="50" />
 		</div>
 		<div class="white-card-body">
 			<BaseHeading v-if="title" size="medium" :content="title" />

components/Comp/Media.vue

@@ -19,14 +19,16 @@ const { data: comp } = useAsyncData(props.uuid, () =>
 		})
 	)
 );
-
-const imageUrl = computed(() => getFileUrl(unref(comp)?.image?.id));
 </script>
 
 <template>
 	<BaseFrame variant="frosted" color="white">
 		<BaseVideo v-if="comp?.type === 'video' && comp.video?.url" :url="comp.video.url" />
-		<img v-else-if="comp?.type === 'image' && comp.image" :src="imageUrl" :alt="comp.image.description ?? undefined" />
+		<NuxtImg
+			v-else-if="comp?.type === 'image' && comp.image"
+			:src="comp?.image?.id"
+			:alt="comp.image.description ?? undefined"
+		/>
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<div v-else-if="comp?.type === 'embed'" v-html="comp.embed" />
 	</BaseFrame>

components/Comp/Quote.vue

@@ -16,10 +16,10 @@
 
 <template>
 	<div v-if="comp" class="comp-quote">
-		<img class="company-logo" height="25" :src="getFileUrl(comp.company_logo)" />
+		<NuxtImg class="company-logo" :src="comp.company_logo" />
 		<BaseText v-if="comp.quote" :content="comp.quote" />
 		<div class="avatar">
-			<img width="64" height="64" :src="getFileUrl(comp.person_image)" />
+			<NuxtImg :src="comp.person_image" preset="circle" />
 			<div>
 				<p>{{ comp.person_name }}</p>
 				<p>{{ comp.person_title }}</p>

components/Nav/Header.vue

@@ -109,7 +109,7 @@ onClickOutside(headerContainer, resetNavState);
 						>
 							<li v-for="link in section.children" :key="link.id">
 								<NuxtLink :href="link.url ?? undefined" :to="(link.page as any)?.permalink" class="link">
-									<img v-if="link.image" :src="getFileUrl(link.image as any)" alt="" class="icon" lazy />
+									<NuxtImg v-if="link.image" :src="link.image as any" alt="" class="icon" lazy />
 									<div class="content">
 										<div class="title">{{ link.title }}</div>
 										<div v-if="link.description" class="description">{{ link.description }}</div>

nuxt.config.ts

@@ -54,5 +54,23 @@ export default defineNuxtConfig({
 		},
 	},
 
-	modules: ['@vueuse/nuxt'],
+	modules: [
+		'@vueuse/nuxt',
+		'@nuxt/image', // https://image.nuxtjs.org/providers/directus
+	],
+
+	image: {
+		provider: 'directus',
+		directus: {
+			baseURL: `${process.env.DIRECTUS_URL}/assets`,
+		},
+		domains: ['directus.app'],
+		presets: {
+			circle: {
+				modifiers: {
+					key: 'circle',
+				},
+			},
+		},
+	},
 });

package.json

@@ -12,6 +12,7 @@
 	"devDependencies": {
 		"@directus/sdk": "11.0.0",
 		"@nuxt/devtools": "latest",
+		"@nuxt/image": "1.0.0-rc.1",
 		"@nuxtjs/eslint-module": "4.1.0",
 		"@types/node": "20.2.5",
 		"@typescript-eslint/eslint-plugin": "5.59.9",