受託の仕事が夏季休暇期間でないため、今のうちにということで現状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も取得できるように設定しました。
このような形で簡単なところからとりあえずかたちになるように進めて、その後、気難しいところを進めていこうと考えています。
また、何かつまづいたところは載せていきます。