Nuxt3をさわってみる

Nuxt3はbeta版になっている、Nuxt3の雰囲気をつかむためインストールから起動するところまでやってみる。

インストール

nuxiという新しいCLIを使う。

npx nuxi init nuxt3-app
cd nuxt3-app
npm install

nuxiについて、プロジェクトのトップでinfoコマンドを実行してみる。

$ npx nuxi info
Nuxt CLI v3.0.0-27389502.88da719
RootDir: /Users/guests/workspace/nuxt/nuxt3-app
Nuxt project info:

------------------------------
- Operating System: Darwin
- Node Version:     v16.13.2
- Nuxt Version:     3.0.0-27389502.88da719
- Package Manager:  npm@8.1.2
- Bundler:          Vite
- User Config:      -
- Runtime Modules:  -
- Build Modules:    -
------------------------------

👉 Report an issue: https://github.com/nuxt/framework/issues/new

👉 Suggest an improvement: https://github.com/nuxt/framework/discussions/new

👉 Read documentation: https://v3.nuxtjs.org

ディレクトリ構造

initした直後は以下の感じ。Nuxt2までのようなlayoutsやpagesのようなディレクトリがなく、プロジェクト作成直後はとてもすっきりしている。

$ ls -a | sort
.
..
.gitignore
README.md
app.vue
node_modules
nuxt.config.ts
package-lock.json
package.json
tsconfig.json

ドキュメントを見ると、今までのようなlayoutsやpagesといったディレクトリは、Nuxt3でも有効であることが分かる。これらは、アプリの特性に合わせて作成すればよいのだと思う。なお、ディレクトリについては、pluginsディレクトリ下のプラグインファイルが自動で読み込まれるなど新しい点もあるので注意したい。

参考リンク

• https://v3.nuxtjs.org/docs/usage/data-fetching

アプリ起動

この状態でrun devするとWelcomeビューが表示される。 

httpsオプションで自己署名証明書を使ってhttpsモードで起動ができる。Nuxt2では、nuxt.configのserverオプションで指定していたと思うけれど、この辺りとても簡単になっている。

npm run dev -- --https

Welcomeビューを変更するには、app.vueを編集するか、pages/index.vueのような新たなビューを作る。

srcDirの変更

公式ドキュメントにあるようなclientの下にアプリリソースを配置する構成にしてみる。ディレクトリを作成し、nuxt.configのsrcDirにclientリソースを格納するディレクトリを指定、そして今ままでのようなlayoutsやpagesにビューを作成する。

mkdir -p client/{assets,components,composables,layouts,middleware,pages,plugins}
rm app.vue

// nuxt.config.ts

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
  srcDir: "client/",
});

<template>
  <div>page/index.vue</div>
</template>

<template>
  <div>
    <h1>Nuxt3</h1>
    <slot />
  </div>
</template>

上記の変更を加え、改めてrun devしてみると以下のように作成したビューが表示されることを確認できる。

npm run dev

参考リンク

• https://v3.nuxtjs.org/getting-started/commands