Nuxt+Expressのプロジェクト作成で良さそうなのは？

Nuxt.jsとExpressで新規プロジェクトを作成する方法をいくつか検証してみました。Nuxt.jsとExpressでアプリケーションを作成すると、SSR（サーバーサイドレンダリング）もデフォルトでやってくれるし、処理もサーバーサイドとフロント側で共通化できたりもして便利です。

どのような作成方法がある？

プロジェクト自体はvue-cliで作成したりすることができます。

基本的な作成方法

Nuxt.jsのマニュアルに紹介されているように、スターターテンプレートがあります。

vue init nuxt-community/starter-template <project-name>

これで最小限のNuxt.jsプロジェクトを作成することができますので、これにExpressを入れれば作成は可能です。ただ、もっと簡単にExpressを入れたプロジェクトを作成することができます。

Express入りのテンプレートを使う

上記のnuxt-communityの他のリポジトリを見てみると、他にもいくつかテンプレートが用意されています。TypeScript入りのtypescript-template等。その中にexpress-templateもありますので、そちらを使ってプロジェクトを作成することができます。

vue init nuxt-community/express-template <project-name>

これならもっと簡単にNuxt.js+Expressのプロジェクトを作成することができます。

ただ、これで試してみたところ、どうもExpress側のプログラムを更新してもホットリロードが行われないようで、その度にいちいちサーバーを再起動しなければなりません。ちょっと面倒だったので他のプロジェクト作成方法も探してみました。

追記）現在はメンテナンスされておらず、使うべきでないものもあったりするようです。その都度確認してください。

create-nuxt-appを使う

同じくnuxt-communityのリポジトリに、create-nuxt-appというものがありました。これはNuxt.jsのアプリケーションを作成する際に、構成を自分で選んで作成することができる非常に便利なものです。

nuxt-community/create-nuxt-app: Create Nuxt.js App in seconds.

下記のどちらかのコマンドで作成することができます。（僕はyarnの方は試していません）

npx create-nuxt-app <my-project>

yarn create nuxt-app <my-project>

下記の構成を選択することができます。

• サーバーサイドのフレームワーク（Express等）
• UIフレームワーク（Bootstrap, Bulma等）
• axiosを使うか
• EsLintを使うか

他にもissueを見るとTypeScriptを使うかも選択できるようにしたい、といった話も出ているので、実装されると嬉しいです。今後にも期待。

これでExpressを選択するとExpressが動作するプロジェクトを作成することができます。しかもこちらはちゃんとNuxt.js側、Express側どちらのプログラムを修正してもちゃんとホットリロードしてくれるようになっています。（正確に言うと、package.jsonのスクリプトのnodemonで--watchを指定しているためです。監視すべきフォルダが複数あるのであれば何度でも--watchを使うことができます）

ためしにexpress-templateに入っているユーザー情報取得処理をコピーしてみました。server/index.jsに下記のような処理を追加して、users.jsを読み込みます。ついでにルーティングも/apiベースにしておきます。

const router = express.Router();
router.use(require("../routes/users"));
app.use("/api", router);

Vueコンポーネント側でも同様に読み込みます。

  async asyncData() {
    let { data } = await axios.get("/api/users");
    return { users: data };
  }

表示も同様です。

<div v-for="user in users" :key="user.name">
  {{ user.name }}
</div>

まとめ

今回はとりあえずNuxt.js+Expressで簡単にプロジェクトを作成する触りの部分だけをやってみました。

他にもMySQL接続やTwitter認証等、アプリケーションに必要なものを試しているので、よろしければそちらも御覧ください。

Nuxt.js+Expressで簡単にTwitter認証

Nuxt.js+Expressでとにかく簡単にORM

Nuxt.js+ExpressのプロジェクトをTypeScript化する