nuxt3の導入と初期設定

nuxt3を使用してvue3をinstallする

npx nuxi init nuxt3-app

npm install vue@next

nuxt2ではjavascriptがデフォルト設定であったが、nuxt3ではTypeScriptがデフォルト設定になっていて今後の開発のセットアップとして便利

スジ彫りのマサ

初期ディレクトリ構成

.
├── .gitignore
├── README.md
├── app.vue
├── nuxt.config.ts
├── package.json
└── tsconfig.json

スジ彫りのマサ

node_modules作成
(package-lock.json追加)

npm install

ローカル立ち上げ

npm run dev

スジ彫りのマサ

現在のnuxt3ではデフォルトではrouter機能がまだ追加されていないため、vue-routerをinstallしpagesディレクトリを作成した方が良いかもしれない。

npm install vue-router@4

スジ彫りのマサ

vuetifyも現在vue3に対応しているものはbeta版しかないため、まだ本開発には向いていない・・

vue add vuetify

? Choose a preset:
  Configure (advanced)
  Default (recommended)
  Vite Preview (Vuetify 3 + Vite)
  Prototype (rapid development)
❯ Vuetify 3 Preview (Vuetify 3)