Revisit nuxt img (#80)

* update to latest vue use and add missing package

* add nuxt img

* swap directus image comp

* remove commented out bits

components/Base/DirectusImage.vue

@@ -18,27 +18,9 @@ export interface DirectusImageProps {
 	height?: number;
 }
 
-const props = defineProps<DirectusImageProps>();
-
-const { pixelRatio } = useDevicePixelRatio();
-
-const src = computed(() => {
-	const url = new URL(`/assets/${props.uuid}`, directusUrl);
-
-	url.searchParams.set('format', 'auto');
-
-	if (props.width) {
-		url.searchParams.set('width', String(Math.round(props.width * unref(pixelRatio))));
-	}
-
-	if (props.height) {
-		url.searchParams.set('height', String(Math.round(props.height * unref(pixelRatio))));
-	}
-
-	return url.toString();
-});
+defineProps<DirectusImageProps>();
 </script>
 
 <template>
-	<img :src="src" :alt="alt" :width="width" :height="height" loading="lazy" />
+	<NuxtImg :src="uuid" :alt="alt" :width="width" :height="height" format="auto" loading="lazy" />
 </template>

nuxt.config.ts

@@ -96,6 +96,7 @@ export default defineNuxtConfig({
 
 	modules: [
 		'@vueuse/nuxt',
+		'@nuxt/image',
 		'nuxt-simple-sitemap', // https://nuxtseo.com/sitemap/getting-started/how-it-works
 		'nuxt-og-image',
 		'floating-vue/nuxt',
@@ -113,6 +114,14 @@ export default defineNuxtConfig({
 		fonts: ['Inter:400', 'Inter:700', 'Poppins:400', 'Poppins:600', 'Poppins:700'],
 	},
 
+	// Nuxt Image Configuration - https://image.nuxtjs.org/getting-started/installation
+	image: {
+		provider: 'directus',
+		directus: {
+			baseURL: `${process.env.DIRECTUS_URL}/assets/`,
+		},
+	},
+
 	vite: {
 		vue: {
 			script: {

package.json

@@ -16,7 +16,8 @@
 		"@types/node": "20.2.5",
 		"@typescript-eslint/eslint-plugin": "5.59.9",
 		"@typescript-eslint/parser": "5.59.9",
-		"@vueuse/nuxt": "10.2.1",
+		"@vueuse/core": "10.4.1",
+		"@vueuse/nuxt": "10.4.1",
 		"@zadigetvoltaire/nuxt-gtm": "0.0.13",
 		"eslint": "8.42.0",
 		"eslint-config-prettier": "8.8.0",
@@ -39,6 +40,7 @@
 		"pnpm": ">=8.6.0"
 	},
 	"dependencies": {
+		"@nuxt/image": "1.0.0-rc.3",
 		"floating-vue": "2.0.0-beta.24",
 		"p-queue": "7.3.4"
 	}