crop faceless developer working on software code on laptop

Nuxt3をさわってみる

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

インストール

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

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

ディレクトリ構造

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

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

参考リンク

アプリ起動

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

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

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

srcDirの変更

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

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

 

参考リンク

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください