Nuxt3のはじめかた

Nuxt3で何か作ろうと思い立った時にいつも私がとりあえず実行していることをまとめます
「とりあえずNuxt3をライトに触ってみたいんだよな」
「最小の工数で作り始めたいだよな」
みたいな人にいいかなと思っています

devContainerを作る

細かいやり方はこちらをご覧ください
https://zenn.dev/find/articles/7bda6821a7df64

イメージはNodejsとJavascriptを利用します

タグはデフォルトで

プロジェクトを初期化する

nuxtプロジェクト初期化コマンドを実行

npx nuxi init . --force

このままEnter

Need to install the following packages:
nuxi@3.11.1
Ok to proceed? (y)

npmを選択

✔ Which package manager would you like to use?
npm

（ここで結構待たされます）

Gitはすでに構築済みなのでNo

✔ Initialize git repository?
No

devContainerの初期化スクリプトを追加

.devcontainer/devcontainer.json

{
    "name": "Node.js",
    "image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye",
+   "postCreateCommand": "npm ci"
}

これでCloneした時に自動でnpm ciするようになります

拡張機能の追加

おすすめ下記の通りです

• Vue - Official
• ESLint
• Prettier - Code formatter

VSCodeの設定変更

ワークスペースレベルで設定すれば全環境で設定まで共通化できます
formatOnSaveなどは有効にしています

devContainerのリビルド

設定を書き換えたので最後にリビルド

開発サーバーの起動

npm run dev

app.vueの書き換え

とりあえず試すだけならとりあえずapp.vueをいじれば動きます

app.vue

<template>
  <div>
    <h1>Hello world</h1>
    <button @click="increment">
      Clicked {{ count }} times
    </button>
  </div>
</template>

<script setup lang="ts">
const count = ref(0)
const increment = () => count.value++
</script>

Nuxtは特定のフォルダにvueファイルやtsファイルを置くことで様々な実装を楽に進められます
詳しくはこちらをご覧ください
https://nuxt.com/docs/getting-started/introduction#automation-and-conventions