From 5a1122c7faf92ae98d8334fc4b268fae22cf738e Mon Sep 17 00:00:00 2001 From: Farnabaz Date: Wed, 2 Oct 2024 14:37:42 +0200 Subject: [PATCH 1/2] feat(image): real-time image transformation --- docs/content/1.docs/2.features/image.md | 88 +++ package.json | 2 + playground/app/layouts/default.vue | 1 + playground/app/pages/image.vue | 79 ++ playground/nuxt.config.ts | 7 + pnpm-lock.yaml | 699 ++++-------------- src/features.ts | 36 +- src/module.ts | 4 +- .../routes/_hub/image/[...params].get.ts | 125 ++++ src/runtime/image/server/tsconfig.json | 3 + src/types/module.ts | 18 + 11 files changed, 511 insertions(+), 551 deletions(-) create mode 100644 docs/content/1.docs/2.features/image.md create mode 100644 playground/app/pages/image.vue create mode 100644 src/runtime/image/server/routes/_hub/image/[...params].get.ts create mode 100644 src/runtime/image/server/tsconfig.json diff --git a/docs/content/1.docs/2.features/image.md b/docs/content/1.docs/2.features/image.md new file mode 100644 index 00000000..3a176944 --- /dev/null +++ b/docs/content/1.docs/2.features/image.md @@ -0,0 +1,88 @@ +--- +title: Image Transformation +navigation.title: Image +description: Add image transformation to your NuxtHub project. +--- + +## Getting Started + +Enable the image transformation in your NuxtHub project by adding the `image` property to the `hub` object in your `nuxt.config.ts` file. + + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + hub: { + image: { + trustedDomains: ['hub.nuxt.com'], + templates: { + small: { width: 128, height: 128, format: 'webp' }, + medium: { width: 512, height: 512, format: 'webp' } + } + } + } +}) +``` + +NuxtHub will add an specific route to your project to transform the image. The route is `/_hub/image/