Nuxt3にNuxt/imageを導入する。

まえがき

Nuxt3もRC版になったということで、勉強も兼ねて自分のWebサイトを作っている途中で得た知識や問題について書く。
今回は画像の最適化を行ってくれる"nuxt/image"モジュールについて。これを導入するまではレスポンシブ画像を全部手動で作っていたので、導入した直後はあまりの手間の無さに変な笑い声が出たのを覚えている。

環境

• node.js v18.13.0
• Typescript v4.7.4
• Nuxt v3.0.0-rc.14
• TailwindCSS v3.2.4
• @nuxt/image-edge v1.0.0
  ※Vueは当然3.0系
  開発環境はWSL(Debian)だったりChromeOS(Crostini+Debian)だったり色々。

導入手順

手順自体は公式ドキュメントの丸写しなので、間違っていたらコメントください。

パッケージの導入

npm i @nuxt/image-edge

Nuxt3系で使う場合は"@nuxt/image-edge"を導入する必要がある。"nuxt/image"で検索するとNuxt2向けのドキュメントが先に出てきてしまうのでこの辺が少しややこしい。導入手順のページはここ

追記:RC版になっていた

最新のドキュメントでは"@nuxt/image-edge"から"@nuxt/image@rc"にインストールするパッケージの名称が変わっている。

npm i @nuxt/image@rc

nuxt.config.tsの編集

導入したモジュールをnuxtで使用できるよう設定ファイルを書き換える。
基本的にはmodulesに"@nuxt/image-edge"を追加するだけでいい。

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  typescript: {
    shim: false
  },
  modules: [ '@nuxt/image-edge'], // 追記,RC版を導入した場合は'@nuxt/image'
  image: {

    presets: {
      common: {
        'legacy-format': 'jpeg',
        'img-attrs': { class: 'img-inside-picture', height: 400, width: 400, decoding: 'async' }
      }
    }
  },
})

Nuxt3ではmodulesとbuildmodulesが区別されなくなった。modulesに追加すればあとはいい感じにやってくれる。

型の追加について

そのままだとTypescript側でエラーが出るので、tsconfigも書き換える。

tsconfig.json

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "types": [ "@nuxt/image-edge"], // 追記,RC版を導入した場合は'@nuxt/image'
  },
}

やることはnuxt.configで行ったことと似ていて、compilerOptionsのtypesに"@nuxt/image-edge"を追加するだけ。
これで/コンポーネントと/コンポーネントが使用可能になる。

細かい使い方は公式ドキュメントを参照

追記

MicroCMSと組み合わせて使ってみた。

参考資料

• Optimized images for Nuxt · Nuxt Image