Nuxt3入門 ~インストール編~

はじめに

Nuxt3を触ろうと思い、その内容をまとめていきます。
今回は、Nuxt3のインストール、開発環境の起動までです。
公式のインストールドキュメントを見ながら進めていきます。

開発環境

ドキュメントによると、下記が必要なようです。

• Node.js: v16.10.0以上
  • 偶数バージョン(16, 18, 20など)の使用
• 【推奨】Editor: VSCode
  • 拡張機能
    • Vue Language Features (Volar)
      • takeover modeを有効にする
        • cmd + shift + p でコマンドパレットを開き、Extensions: Show Built-in Extensionsを選択
        • TypeScript と JavaScript の言語機能 を選択し、Disable(workspace)を選択してVSCodeをリロード

筆者は下記環境で試しています。

• Node.js: v18.16.0
  • パッケージマネージャはpnpmを使用しています。適宜読み替えてください
• Editor: VSCode

Nuxt3のインストール

プロジェクトの作成

nuxi コマンドを使ってプロジェクトを作成します。
(筆者が初めてNuxtを触った時はcreate-nuxt-appを使っていましたが、)

$ npx nuxi@latest init .
Nuxi 3.6.1
✨ Nuxt project is created with v3 template. Next steps:
 › Install dependencies with npm install or yarn install or pnpm install
 › Start development server with npm run dev or yarn dev or pnpm run dev

カレントディレクトリに、シンプルな構成のNuxt3プロジェクトが出来上がるようです。

.
├── README.md
├── app.vue
├── nuxt.config.ts
├── package.json
├── public
│   └── favicon.ico
├── server
│   └── tsconfig.json
└── tsconfig.json

依存パッケージをインストールしましょう

• pnpm install

開発環境の起動

pnpm run dev

localhost:3000 にアクセスすると、Nuxt3のデフォルトページが表示されます。
レンダリングまでに時間がどれだけかかったのかが、表示されます。

【VSCode + Volarの場合】nuxt.config.tsの設定を変更する

ドキュメントで、nuxt.config.tsの設定を変更するように書かれているので対応します。

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  typescript: {
    shim: false
  },
})

defineNuxtConfigの型情報が無いのでVSCode上で赤線出てますが、後々解消していきます。

Hello, Worldを表示する

app.vue

<template>
  <div>
-   <NuxtWelcome />
+   <p>Hello World!</p>
  </div>
</template>

作ってみて

筆者は古にcreate-nuxt-app を使ってプロジェクト作成をした覚えがあるのでnuxiコマンドに少し驚きました。
nuxiは対話などはなく、シンプルな構成を作る形のようですね。
自分でいろいろカスタマイズする必要がありそうなので、次はその辺をまとめてみようと思います。