Zenn
🐶

個人的Nuxt3入門

2023/03/28に公開
Nuxt
Vue.js
Vue 3
Nuxt 3
tech

はじめに

最近の私は Quasar framework を愛してやまないですが、少しこちらの方をいじる機会も想定されそうなので、基本的なところを押さえようと思います。

プロジェクト生成+インストール

フォルダを作成している前提で、以下でプロジェクト生成とインストール。

npx nuxi init .
npm install

Auto imports

決められた関数やディレクトリは明示的に宣言しなくてもインポートされる。詳細は以下のリンクを参照すること。

Auto imports

ディレクトリに関しては自分で作成する必要がある。その中には、一部設定が必要なものもあるのには注意が必要です。

ページ/レイアウト

「/pages」「/layouts」ディレクトリを使用するには「nuxt.config.ts」にて、以下の設定が必要です。

nuxt.config.ts
export default defineNuxtConfig({
  pages: true,
});

その後、「app.vue」は基本的には以下の通りにする。

app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

「/pages」以下のファイルにはパスが割り当てられる。例えば「/pages/index.vue」なら「/」、「/pages/about.vue」なら「/about」にパスが割り当てられる。

あとは細かいパーツは「components」フォルダに入れればよいという感じ。

composables ディレクトリ

このディレクトリで気を付けなければならないのは、以下で示すようにネストが深くなると読み込まれないということ。ここには自作の関数や状態管理をする。

composables
 | - index.ts // scanned
 | - useFoo.ts // scanned
 | - nested
 | --- utils.ts // not scanned

状態管理

状態管理もここでやると良さそう。vue や pinia などの状態管理ライブライを使用する必要はなさそう（裏では使われてるのかもしれませんが）。詳細な仕様はよくわかりませんが、こうみると Option API の書き方に囚われている感じがします。

composables/state.ts
export const useCount = () => {
  return {
    counter: useState("counter", () => 0),
    addCount(): void {
      this.counter.value++;
    },
  };
};

server ディレクトリ

名前の通り、サーバサイドの処理を記述するところ。
「server/api/hello.ts」みたいにファイルを作成すると「await $fetch('/api/hello')」でアクセスできる様子。

server/api/hello.ts
export default defineEventHandler((event) => {
  return {
    api: "works",
  };
});

メソッドは「server/api/hello.get.ts」で GET、「server/api/hello.post.ts」で POST みたいに指定できる。
「server/api/hello/[id].ts」であると、params として id を取得できる。こうなるとあまりパスのネストは深く出来なそうに見えるけど、皆どうしてんだろ、とは思う。そもそもネストを深くしないか。

server/api/hello/[id].ts
export default defineEventHandler((event) => {
  const id = parseInt(event.context.params.id) as number
  ～～
});

おわりに

触ってみて思ったことは、インポートが必要ない分、気にすることが少ないなと思いました。Nuxt は開発のスムーズさが良いという感じでしょうか。Vue3 は後方互換性を捨てたことにより UI フレームワークがしっちゃかめっちゃかになっているイメージなので、その辺りが解決すると良いのかも。今だと「Tailwind」か「Vuetify」なのかもしれないけど、どちらにしてもそれほど手間は変わらないかも。Quasar framework は Vue3 対応がめちゃくちゃ早かったですし、UI コンポーネント同封やマルチデバイス対応が強みな気がします。その時々で使用するものを変えると良いとは思いますね。

全部説明できると良いかもしれませんが、これでとりあえず画面作れるし、サーバサイドの処理も書けるので一旦ここまで。気が向いたら続きを書く。

参考

Discussion