Nuxt3でWebサイトの再構築を進める1

、、、、
Kentaro Kitagawa

受託の仕事が夏季休暇期間でないため、今のうちにということで現状Nuxt2の状態だったcdbk.tokyoのサイトをNuxt3で対応させつつ、デザインを変えるために色々やった備忘録を少しずつまとめていきます。

目次

flickr APIのレスポンスをjsonpからjson、取得を$jsonpからuseFetchに

Nuxt3からはデフォルトで用意されているfetchのuseFetchがあったので、vueなプラグインのvue-jsonpを使わずにuseFetchを使ってJSON形式で取得できるようにしました。

Flickrv APIはデフォルトjsonpになってしまうのを防ぐためにAPIのアクセスURLのクエリに&nojsoncallback=1を追加してJSON形式そのままで取得できるようにしました。

proxyもプラグインいらずになっていました

以前はproxyのプラグインを用意して設定をnuxt.config.jsに書いていたのですが、Nuxt3になってからはnitro.config.tsというファイルを用意して、下記のような形でFlickrとブログのURLを設定しました。

export default defineNitroConfig({
  devProxy: {
    '/***/***/': {
      target: 'https://***.flickr.***/***/***/',
      changeOrigin: true,
      hostRewrite: true,
      cookieDomainRewrite: true,
      headers: {
        'X-Forwarded-Host': 'localhost:3000',
        'X-Forwarded-Proto': 'http'
      },
    },
    '/feed/***/': {
      target: 'https://***/feed/***/',
      changeOrigin: true,
      hostRewrite: true,
      cookieDomainRewrite: true,
      headers: {
        'X-Forwarded-Host': 'localhost:3000',
        'X-Forwarded-Proto': 'http'
      },
    }
  }
})

...

npm run generateでAPIがJSONが書き出されないようにする

Nuxt3で何も設定せずに静的ページを組んでしまうと、中で使っている文字列やAPIのレスポンスがpayloadベースでJSONデータでまとまった状態に書き出されてしまうので、nuxt.config.tsに

export default defineNuxtConfig({
  ssr: false,
  experimental: {
      payloadExtraction: false,
  },
	...

のような形で指定を追加して画面読み込み時にAPIも取得できるように設定しました。

このような形で簡単なところからとりあえずかたちになるように進めて、その後、気難しいところを進めていこうと考えています。

また、何かつまづいたところは載せていきます。

Post Views: 821