MacでNuxt 3、VercelでNuxt3 App、QiitaAPIで記事情報を取得して表示、無限スクロール

Nuxt.jsはVue.jsのフレームワーク

Nodeが未インストールの時は
Node.jsをインストール
Node.jsをインストール - MBP(はてな)

$ npx nuxi init nuxt3-app
$ cd nuxt3-app
$ npm install
$ npm run dev
$ npm run dev -- -oでブラウザで開く

VueでQiitaAPIを使って記事情報を取得して表示 - MBP(はてな)
$ vi app.vueして置き換え
https://raw.githubusercontent.com/hiroyuki12/vercel-vite-vue/main/src/App.vue
vercel-vite-vue/App.vue at main · hiroyuki12/vercel-vite-vue · GitHub

$ mkdir componentsフォルダを作成して、
$ vi components/HelloWorld.vueを作成
https://raw.githubusercontent.com/hiroyuki12/vercel-vite-vue/main/src/components/HelloWorld.vue
https://github.com/hiroyuki12/vercel-vite-vue/blob/main/src/components/HelloWorld.vue

$ npm install axios

$ npm run dev

$ mkdir assets、$ mkdir assets/cssフォルダを作成して、
$ vi assets/css/style.cssを新規作成
vercel-vite-vue/style.css at main · hiroyuki12/vercel-vite-vue · GitHub

$ vi app.vueして、importを追加
import './assets/css/style.css'
vercel-vite-vue/main.js at main · hiroyuki12/vercel-vite-vue · GitHub

app.vueのstyleが反映されないので、app.vueの内容をassets/css/style.cssに追加すると反映された
vercel-nuxt3_/style.css at main · hiroyuki12/vercel-nuxt3_ · GitHub

Nuxt 3 - Vercel

VercelにGitHubからimport

GitHub
GitHub - hiroyuki12/vercel-nuxt3_

アプリ
https://vercel-nuxt3-hiroyuki12.vercel.app

📝 Nuxt 3 公式ドキュメント 日本語訳

Nuxt 3 - Netlify

VueでQiitaAPIを使って記事情報を取得して表示 - MBP(はてな)

無限スクロール
VueでQiitaAPIを使って記事情報を取得して表示 - MBP(はてな)

PWAがうまくいかないので、Nuxt 2で、
$ npx create-nuxt-app my-app
Progressive Web App (PWA) Support　にチェックをつけると、
PWAにできた。
nuxt-app
Overview – Vercel
GitHub - hiroyuki12/vercel-nuxt2_
Nuxt.js で PWA(Progressive Web Apps) のベースアプリを作る | Articles | Riotz.works

pages/index.vueをapp.vueの内容に更新
import './assets/css/style.css' は行ごと削除。
vercel-nuxt3_/app.vue at main · hiroyuki12/vercel-nuxt3_ · GitHub

componentsにHelloWorld.vueを追加
vercel-nuxt3_/HelloWorld.vue at main · hiroyuki12/vercel-nuxt3_ · GitHub

nuxt-app

days ago
$ npm install dayjs
Day.js で「〇〇分前」のような相対日時を扱う
Time from now · Day.js