feat: NuxtImageモジュールの導入-1

Author: yamageji

apps/web/app/components/event/EventAsset.vue

@@ -2,19 +2,26 @@
 import type { Event } from '@vuejs-jp/model'
 
 interface EventAssetProps {
-  title: Extract<Event, 'creative-wall' | 'free-drinks-and-snacks' | 'tattoo-space' | 'cocktail-bash'>
+  title: Extract<
+    Event,
+    'creative-wall' | 'free-drinks-and-snacks' | 'tattoo-space' | 'cocktail-bash'
+  >
   marginTop?: number
 }
 
 const props = defineProps<EventAssetProps>()
 </script>
 
 <template>
-  <img
+  <NuxtImg
     :src="`/event/${title}.png`"
     alt=""
     class="eventcard-image"
     :style="{ marginTop: `${marginTop}px` }"
+    width="920"
+    height="444"
+    fit="cover"
+    preload
     loading="lazy"
   />
 </template>

apps/web/app/components/event/EventMultipleAssets.vue

@@ -16,12 +16,17 @@ const props = defineProps<EventMultipleAssetsProps>()
       '--head-img-height': `${imgHeight}px`,
     }"
   >
-    <img
+    <NuxtImg
       v-for="(title, key) in titleList"
       :key
       :src="`/event/${title}-${key + 1}.png`"
       alt=""
+      width="792"
+      height="512"
+      fit="cover"
+      preload
       loading="lazy"
+      class="image"
     />
   </div>
 </template>
@@ -45,4 +50,9 @@ const props = defineProps<EventMultipleAssetsProps>()
   margin: 0 auto;
   height: var(--head-img-height);
 }
+
+.image {
+  width: auto;
+  height: 100%;
+}
 </style>

apps/web/app/components/ticket/NamecardSection.vue

@@ -24,7 +24,13 @@ const { locale: currentLocale } = useLocaleCurrent()
     </div>
 
     <div class="content-wrapper">
-      <img :src="'/namecard/namecard-samples.png'" alt="test" loading="lazy" />
+      <NuxtImg
+        :src="'/namecard/namecard-samples.png'"
+        alt="test"
+        placeholder
+        preload
+        loading="lazy"
+      />
       <div class="buttons-wrapper">
         <VFLinkButton
           class="action-button"

apps/web/app/components/ticket/PersonalSponsorSection.vue

@@ -14,9 +14,9 @@ import { ticketUrl } from '~/utils/constants'
         :key="i"
         :title="$t(`personal_sponsor.merit${i}.title`)"
         :detail="$t(`personal_sponsor.merit${i}.detail`)"
-        :caution="(i === 2 || i === 4) ? $t(`personal_sponsor.merit${i}.caution`) : ''"
+        :caution="i === 2 || i === 4 ? $t(`personal_sponsor.merit${i}.caution`) : ''"
       >
-        <img alt="" :src="`/sponsor/merit-${i}.jpg`" loading="lazy" />
+        <NuxtImg alt="" :src="`/sponsor/merit-${i}.jpg`" preload loading="lazy" />
       </VFMeritCard>
     </div>
     <div class="personal-sponsor-text">
@@ -109,7 +109,8 @@ import { ticketUrl } from '~/utils/constants'
 
 @media (--tablet) {
   .personal-sponsor-body {
-    --personal-sponsor-body-padding: calc(var(--unit) * 4) calc(var(--unit) * 2) calc(var(--unit) * 4);
+    --personal-sponsor-body-padding: calc(var(--unit) * 4) calc(var(--unit) * 2)
+      calc(var(--unit) * 4);
   }
 
   .personal-sponsor-body h3 {

apps/web/nuxt.config.ts

@@ -27,26 +27,23 @@ export default defineNuxtConfig({
       },
     },
   },
-  modules: [
-    '@vuejs-jp/vuefes-ui',
-    [
-      '@nuxtjs/device',
-      {
-        device: {
-          refreshOnResize: true,
-        },
+  modules: ['@vuejs-jp/vuefes-ui', [
+    '@nuxtjs/device',
+    {
+      device: {
+        refreshOnResize: true,
       },
-    ],
-    '@nuxtjs/i18n',
-    '@nuxtjs/supabase',
-    '@nuxt/content',
-    '@pinia/nuxt',
-    'nuxt-gtag',
-  ],
+    },
+  ], '@nuxtjs/i18n', '@nuxtjs/supabase', '@nuxt/content', '@pinia/nuxt', 'nuxt-gtag', '@nuxt/image'],
   // .env の NUXT_PUBLIC_SITE_URL を設定したので、一旦コメントアウトする
   // site: {
   //   url: 'https://vuefes.jp/2024/',
   // },
+  image: {
+    // provider: 'netlify',
+    quality: 80,
+    format: ['avif', 'webp']
+  },
   i18n: {
     legacy: false,
     strategy: 'prefix_except_default',

apps/web/package.json

@@ -27,6 +27,7 @@
     "@nuxt/content": "2.12.1",
     "@nuxt/types": "^2.17.3",
     "@nuxtjs/device": "3.1.1",
+    "@nuxt/image": "1.8.0",
     "@nuxtjs/i18n": "8.2.0",
     "@nuxtjs/supabase": "1.2.0",
     "@pinia/nuxt": "0.5.3",

bun.lockb

@@ -10,7 +10,7 @@ withDefaults(defineProps<AvatarProps>(), {
 </script>
 
 <template>
-  <img :src="src" :alt="alt" :loading="loading" />
+  <NuxtImg :src="src" :alt="alt" :loading="loading" placeholder preload />
 </template>
 
 <style scoped>

packages/ui/components/speaker/Avatar.vue

@@ -12,10 +12,22 @@ const props = withDefaults(defineProps<TicketCardProps>(), {
 
 <template>
   <div class="ticket-card">
-    <img class="ticket-img" :src="props.imgSrc" :alt="props.imgAlt" loading="lazy" />
+    <NuxtImg
+      class="ticket-img"
+      :src="props.imgSrc"
+      :alt="props.imgAlt"
+      width="928"
+      height="520"
+      fit="cover"
+      placeholder
+      preload
+      loading="lazy"
+    />
     <div class="ticket-title">
       <template v-if="!isClose">{{ props.title }}</template>
-      <template v-else><s>{{ props.title }}</s></template>
+      <template v-else
+        ><s>{{ props.title }}</s></template
+      >
     </div>
     <div class="ticket-content">
       <slot />