feat: nuxt-themes#137 add nuxt img integration resulting in modern im…

…age formats and responsive sizes by default, improves performance (mobile).

components/AppHeader.vue

@@ -24,8 +24,8 @@ const show = ref(false)
       <NuxtLink v-if="alpine.header.logo" to="/">
         <!-- TODO: width/height doesn't make much sense here, but Lighthouse requires it. 
         Used current Alpine logo ratio, will break on enduser logo -->
-        <NuxtImg class="dark-img" :src="alpine.header.logo.pathDark" :alt="alpine.header.logo.alt" width="89" height="31" />
-        <NuxtImg class="light-img" :src="alpine.header.logo.path" :alt="alpine.header.logo.alt" width="89" height="31" />
+        <NuxtPicture class="dark-img" :src="alpine.header.logo.pathDark" :alt="alpine.header.logo.alt" width="89" height="31" fetchpriority="high" decoding="sync" loading="eager" />
+        <NuxtPicture class="light-img" :src="alpine.header.logo.path" :alt="alpine.header.logo.alt" width="89" height="31" fetchpriority="high" decoding="sync" loading="eager" />
       </NuxtLink>
       <NuxtLink v-else to="/" class="fallback">
         {{ alpine.title }}

components/content/ArticlesListItem.vue

@@ -50,12 +50,15 @@ const id = computed(() => {
         </span>
       </div>
       <NuxtLink :to="article._path">
-        <NuxtImg
+        <NuxtPicture
           v-if="article.cover"
           :src="article.cover"
           :alt="article.title"
-          width="16"
-          height="9"
+          width="432"
+          height="243"
+          :decoding="featured ? 'sync' : 'async'"
+          :fetchpriority="featured ? 'high' : 'low'"
+          :loading="featured ? 'eager' : 'lazy'"
         />
       </NuxtLink>
     </div>
@@ -80,7 +83,7 @@ const id = computed(() => {
   </article>
 </template>
 
-<style scoped lang="ts">
+<style lang="ts">
 css({
   article: {
     display: 'flex',

components/content/Gallery.vue

@@ -14,18 +14,19 @@ defineProps({
     <div
       class="layout"
     >
-      <NuxtImg
+      <NuxtPicture
         v-for="(image, index) in images"
         :key="index"
         :src="image"
-        :width="16"
-        :height="9"
+        :width="418"
+        :height="236"
+        loading="lazy"
       />
     </div>
   </section>
 </template>
 
-<style scoped lang="ts">
+<style lang="ts">
 css({
   '.gallery': {
     '.layout': {

components/content/Hero.vue

@@ -30,19 +30,22 @@ defineProps({
           </ContentSlot>
         </div>
       </div>
-      <NuxtImg
+      <NuxtPicture
         v-if="image"
-        :class="imagePosition"
+        :img-attrs="{ class: [imagePosition, 'hero-image'] }"
         :src="image"
         :alt="imageAlt"
-        :width="16"
-        :height="9"
+        :width="432"
+        :height="288"
+        fetchpriority="high"
+        decoding="sync"
+        loading="eager"
       />
     </div>
   </section>
 </template>
 
-<style scoped lang="ts">
+<style lang="ts">
 css({
   '.hero': {
     '.layout': {
@@ -70,7 +73,7 @@ css({
         '&.left': {
           order: -1
         }
-      },
+      }
     }
   }
 })

nuxt.config.ts

@@ -47,6 +47,7 @@ export default defineNuxtConfig({
     envModules.tokens,
     envModules.studio,
     '@nuxt/content',
+    '@nuxt/image-edge',
     updateModule as any
   ],
   components: [

package.json

@@ -36,6 +36,7 @@
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",
+    "@nuxt/image-edge": "1.0.0-28059208.2abef1b",
     "@nuxtjs/plausible": "^0.2.1",
     "@types/node": "^20.1.5",
     "eslint": "^8.40.0",