feat: add nuxt-image

Author: yjl9903

components/TokutenItem.vue

@@ -8,8 +8,12 @@ const props = defineProps<{
   data: DetailItem;
 }>();
 
+const img = useImage();
+
 async function downloadImage() {
   // TODO
+  const image = img(props.data.image);
+  console.log(image);
   toast('WIP', { description: 'WIP' });
 }
 
@@ -26,7 +30,7 @@ async function copyDescription() {
 
 <template>
   <li class="flex gap-4 mt-4">
-    <img class="max-w-36" :src="data.image" />
+    <NuxtImg class="max-w-36" :src="data.image" />
     <div class="grid grid-rows-[1fr_auto] gap-2">
       <p class="text-3.5 whitespace-pre-line">{{ data.description }}</p>
       <div class="flex gap-4">

nuxt.config.ts

@@ -3,7 +3,7 @@ import { fileURLToPath } from 'node:url';
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ['@unocss/nuxt', 'shadcn-nuxt'],
+  modules: ['@unocss/nuxt', 'shadcn-nuxt', '@nuxt/image'],
   alias: {
     'get-bonus': fileURLToPath(new URL('./packages/get-bonus/src/index.ts', import.meta.url))
   },
@@ -19,6 +19,18 @@ export default defineNuxtConfig({
       meta: []
     }
   },
+  image: {
+    domains: [
+      'melonbooks.co.jp',
+      'animate.co.jp',
+      'ecs.toranoana.jp',
+      'toranoana.jp',
+      'ecdnimg.toranoana.jp',
+      'gamers.co.jp',
+      'comiczin.jp',
+      'mangaoh.co.jp'
+    ]
+  },
   unocss: {
     preflight: true
   },

package.json

@@ -27,6 +27,7 @@
     "vue-sonner": "^1.0.3"
   },
   "devDependencies": {
+    "@nuxt/image": "^1.3.0",
     "@nuxtjs/tailwindcss": "^6.11.1",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/jsdom": "^21.1.6",