Nuxt3はbeta版になっている、Nuxt3の雰囲気をつかむためインストールから起動するところまでやってみる。
インストール
nuxiという新しいCLIを使う。
|
1 2 3 |
npx nuxi init nuxt3-app cd nuxt3-app npm install |
nuxiについて、プロジェクトのトップでinfoコマンドを実行してみる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$ 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のようなディレクトリがなく、プロジェクト作成直後はとてもすっきりしている。
|
1 2 3 4 5 6 7 8 9 10 11 |
$ ls -a | sort . .. .gitignore README.md app.vue node_modules nuxt.config.ts package-lock.json package.json tsconfig.json |
ドキュメントを見ると、今までのようなlayoutsやpagesといったディレクトリは、Nuxt3でも有効であることが分かる。これらは、アプリの特性に合わせて作成すればよいのだと思う。なお、ディレクトリについては、pluginsディレクトリ下のプラグインファイルが自動で読み込まれるなど新しい点もあるので注意したい。
参考リンク
アプリ起動
この状態でrun devするとWelcomeビューが表示される。
httpsオプションで自己署名証明書を使ってhttpsモードで起動ができる。Nuxt2では、nuxt.configのserverオプションで指定していたと思うけれど、この辺りとても簡単になっている。
|
1 |
npm run dev -- --https |
Welcomeビューを変更するには、app.vueを編集するか、pages/index.vueのような新たなビューを作る。
srcDirの変更
公式ドキュメントにあるようなclientの下にアプリリソースを配置する構成にしてみる。ディレクトリを作成し、nuxt.configのsrcDirにclientリソースを格納するディレクトリを指定、そして今ままでのようなlayoutsやpagesにビューを作成する。
|
1 2 |
mkdir -p client/{assets,components,composables,layouts,middleware,pages,plugins} rm app.vue |
|
1 2 3 4 5 6 7 |
// nuxt.config.ts import { defineNuxtConfig } from "nuxt3"; export default defineNuxtConfig({ srcDir: "client/", }); |
|
1 2 3 |
<template> <div>page/index.vue</div> </template> |
|
1 2 3 4 5 6 |
<template> <div> <h1>Nuxt3</h1> <slot /> </div> </template> |
上記の変更を加え、改めてrun devしてみると以下のように作成したビューが表示されることを確認できる。
|
1 |
npm run dev |
コメント