Nuxt3動かすところまで

yarn create nuxt-app nuxt3-app

プロジェクト名nuxt3-appで作成
Typescript、Yarn、TailwindCSS、HTML、Axios、ESLint、Prettier、None（Testing framework）、Universal (SSR / SSG) 、Server (Node.js hosting) 、jsconfig.json (Recommended for VS Code if you're not using typescript)、None（Continuous integration）、Git、

のざわ

起動

cd nuxt3-app
yarn dev

エラーがでた。

 Nuxt Fatal Error 
Error: @nuxtjs/tailwindcss tried to access pathe, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

一回tailwindcss消して入れ直してみる。

yarn remove @nuxtjs/tailwindcss
yarn add @nuxtjs/tailwindcss

同じエラー

tailwindの公式の入れ方にのっとる

yarn remove @nuxtjs/tailwindcss
yarn add -D tailwindcss postcss autoprefixer

ダメだった。

のざわ

↑これを参考にしても起動までいけなかった

のざわ

↑次これ参考にしてみる。
これでもできなかったらnuxt3をdockerで起動させることを考えた方が良いかも

のざわ

docker✖️nuxt3

のざわ

↓これでもなかなかうまく行かない

のざわ

yarnのバージョン3系なのが良くないのかもしれない...
yarnのバージョン3系だとnode_modulesできないのか...

のざわ

↑基本これにこれにのっとるが、yarn installする前に

.yarnrc.yml

nodeLinker: node-modules

を作成し、
その後yarn devする前に

.package.json

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  },
  "dependencies": {
    "@nuxt/kit": "^3.0.0",
    "nuxt": "^3.0.0"
  },
  "packageManager": "yarn@3.0.0"
}

のように

"dev": "nuxt dev",

に変更。

その後にyarn devで実行できた

のざわ

↑こっちのアプローチでも起動までいけた。

yarn create nuxt-app <project-name>

のあとに上記の.yarnrc.ymlを追加して、.yarnフォルダを手で削除して、その後

yarn install

を実行。

yarn devしたら

↑このエラーが出たため（自分の環境ではnodeのバージョンがv19.0.1だった）

export NODE_OPTIONS=--openssl-legacy-provider

を実行。
その後

yarn dev

で起動したら起動できた。

大枠nuxtの起動で躓いたのはyarnの3系がpnpという仕組みでnode_modulesを作らなかったため。
node_modulesを作るようにするアプローチでうまくいき始めた。

のざわ

yarn create nuxt-app <project-name>時にtailwindcss入れるより、

↑これを参考にtailwindcssを入れるほうが良さそう

のざわ

結局、
①https://nuxtjs.org/docs/get-started/installation#using-create-nuxt-app　に従ってアプリ作る
②.yarnrc.ymlを作成
③.yarnとnode_modulesを削除
④yarn install
⑤yarn remove @nuxtjs/tailwindcss（create nuxt-appでtailwind指定しても動かない）
⑥https://tailwindcss.com/docs/guides/nuxtjs　←これも見ながらtailwind入れ直す
⑦export NODE_OPTIONS=--openssl-legacy-provider　を実行
⑧yarn dev
で起動っていう流れ

のざわ

やっぱり下記コマンド実行して１個１個入れていくのが正解そう。
npx nuxi init プロジェクト名

yarn create nuxt-app
で作ったらなぜかNuxt2系で入ってくるし。。。

のざわ

あ、いままでNuxt2系のドキュメント見ながらやってたっぽい。

↑これがNuxt3系だ。。。。