「IT」カテゴリーアーカイブ

Nuxt3でExpressを使ってみる

はじめに

Nuxt3には、nitro（＋h3）というサーバエンジンが標準で備わっているため、server/apiやserver/routeディレクトリにハンドラファイルを置くだけでAPIが簡単に実装できます。しかし、馴染みのあるexpressフレームワークを使いたいという場合もあるのではと思います。

そこで、今回はNuxt3にexpressフレームワークを導入してみます。

Nuxt3とExpressのインストール

まずは、最新のnuxtとexpressをインストールします。

npx nuxi init nuxt-app
cd nuxt-app
npm i express

npx nuxi init nuxt-app

cd nuxt-app

npm i express

今回の環境は以下のようになっています。

macOS 10.15.7
NodeJS 16.15.0
npm 8.19.2
nuxt3 rc11
express 4.18.1

serverHandlerの作成

nuxt3では、nuxt.config.tsのserverHandlersにハンドラを設定します。今回の設定例は、以下のようになります。/serverというパスに対するリクエストは、/myapi/index.tsのミドルウェアで処理するとします。今回で言えば、expressになります。

export default defineNuxtConfig({
serverHandlers: [
{ route: "/server/**", handler: "~/myapi/index.ts" },
],
});

export default defineNuxtConfig({

serverHandlers: [

{ route: "/server/**", handler: "~/myapi/index.ts" },

});

ここでの設定は、実際にはh3のミドルウェアとしてマウントされます。h3は、expressやconnectとの互換を最大限に考慮しているとあるので、expressも普通に使えるようです。

routeの記述ついて、h3がradix3というライブラリを内部で使っているのでその記述形式に準じます。

参考リンク

serverHandlers
- https://v3.nuxtjs.org/api/configuration/nuxt.config#serverhandlers
h3
- https://github.com/unjs/h3#how-it-works
radix3
- https://www.npmjs.com/package/radix3

expressの設定

続いてexpressのミドルウェアをserverHandlerとして設定する部分です。

import express from "express";
const app = express();
const router = express.Router();
app.use(express.json());
app.use((_req, _res, next) => {
console.log("log");
next();
});
// エラーを返す場合の挙動確認用
router.get("/error", (_req, res, next) => {
next(new Error("hoge"));
});
router.get("/hello", (_req, res, _next) => {
res.json({ message: "hello world" });
});
// expressがパス/serverでlookupできるように設定
app.use("/server", router);
export default app;

import express from "express";

const app = express();

const router = express.Router();

app.use(express.json());

app.use((_req, _res, next) => {

console.log("log");

next();

});

// エラーを返す場合の挙動確認用

router.get("/error", (_req, res, next) => {

next(new Error("hoge"));

});

router.get("/hello", (_req, res, _next) => {

res.json({ message: "hello world" });

});

// expressがパス/serverでlookupできるように設定

app.use("/server", router);

export default app;

以上でhttp://localhost:3000/server/helloで結果が返るようになるはずです。

試してみると正常に結果を取得できているようです。

node-server向けにビルド

プロダクション向けのビルドでも挙動が問題ないか確認しておきます。同じように結果が返ってきているようです。

npm run build
node .output/server/index.mjs

1 2	npm run build node .output/server/index.mjs

APIのエラー時の挙動はどうなるか？

APIでjson形式で結果を取得できるようになりましたが、サーバーエラー時にhtml形式で結果が返ってきてしまいます。どうもエラーページはnitroがハンドルしているようで、nitroのエラーハンドラ内でjsonリクエストであると判断した場合は、content-typeがapplication/jsonとして返る？ようです。jsonリクエストであると判断する条件は、以下のようです。

ヘッダacceptがapplication/jsonを含む
ヘッダuser-agentが、curl/、httpie/を含む
リクエストパスが.jsonで終わっている
リクエストパスに/api/が含まれる

確認のためwgetとcurlの２つのツールでAPIにアクセスしてみます。curlは、nitroのデフォルトのエラーハンドリングではjsonリクエストとして解釈されるようです。

$ wget -qS http://127.0.0.1:3000/server/error
HTTP/1.1 500 Internal Server Error
Access-Control-Allow-Origin: *
x-powered-by: Express
content-type: text/html;charset=UTF-8
server-timing: -;dur=0;desc="Generate"
date: Sun, 25 Sep 2022 05:19:31 GMT
connection: close
content-length: 6158
# apiでreq.headersをダンプ
#{
#  connection: 'close',
#  host: '127.0.0.1:3000',
#  'accept-encoding': 'identity',
#  accept: '*/*',
#  'user-agent': 'Wget/1.20.3 (darwin19.0.0)',
#  'x-forwarded-for': '::ffff:127.0.0.1',
#  'x-forwarded-port': '55297',
#  'x-forwarded-proto': 'IPv6'
#}
$ curl -vq http://127.0.0.1:3000/server/error
*   Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to 127.0.0.1 (127.0.0.1) port 3000 (#0)
> GET /server/error HTTP/1.1
> Host: 127.0.0.1:3000
> User-Agent: curl/7.64.1
> Accept: */*
> 
< HTTP/1.1 500 Internal Server Error
< Access-Control-Allow-Origin: *
< x-powered-by: Express
< content-type: application/json
< server-timing: -;dur=0;desc="Generate"
< date: Sun, 25 Sep 2022 05:19:35 GMT
< connection: close
< content-length: 1153
< 
* Closing connection 0
{"url":"/server/error","statusCode":500,"statusMessage":"Internal Server Error","message":"hoge","stack":"<pre><span class=\"stack\">at ./.nuxt/dev/index.mjs:376:8</span>\n<span class=\"stack internal\">at Layer.handle [as handle_request] (./node_modules/express/lib/router/layer.js:95:5)</span>\n<span class=\"stack internal\">at next (./node_modules/express/lib/router/route.js:144:13)</span>\n<span class=\"stack internal\">at Route.dispatch (./node_modules/express/lib/router/route.js:114:3)</span>\n<span class=\"stack internal\">at Layer.handle [as handle_request] (./node_modules/express/lib/router/layer.js:95:5)</span>\n<span class=\"stack internal\">at ./node_modules/express/lib/router/index.js:284:15</span>\n<span class=\"stack internal\">at Function.process_params (./node_modules/express/lib/router/index.js:346:12)</span>\n<span class=\"stack internal\">at next (./node_modules/express/lib/router/index.js:280:10)</span>\n<span class=\"stack internal\">at Function.handle (./node_modules/express/lib/router/index.js:175:3)</span>\n<span class=\"stack internal\">at router (./node_modules/express/lib/router/index.js:47:12)</span></pre>"}(

$ wget -qS http://127.0.0.1:3000/server/error

HTTP/1.1 500 Internal Server Error

Access-Control-Allow-Origin: *

x-powered-by: Express

content-type: text/html;charset=UTF-8

server-timing: -;dur=0;desc="Generate"

date: Sun, 25 Sep 2022 05:19:31 GMT

connection: close

content-length: 6158

# apiでreq.headersをダンプ

# connection: 'close',

# host: '127.0.0.1:3000',

# 'accept-encoding': 'identity',

# accept: '*/*',

# 'user-agent': 'Wget/1.20.3 (darwin19.0.0)',

# 'x-forwarded-for': '::ffff:127.0.0.1',

# 'x-forwarded-port': '55297',

# 'x-forwarded-proto': 'IPv6'

$ curl -vq http://127.0.0.1:3000/server/error

* Trying 127.0.0.1...

* TCP_NODELAY set

* Connected to 127.0.0.1 (127.0.0.1) port 3000 (#0)

> GET /server/error HTTP/1.1

> Host: 127.0.0.1:3000

> User-Agent: curl/7.64.1

> Accept: */*

< HTTP/1.1 500 Internal Server Error

< Access-Control-Allow-Origin: *

< x-powered-by: Express

< content-type: application/json

< server-timing: -;dur=0;desc="Generate"

< date: Sun, 25 Sep 2022 05:19:35 GMT

< connection: close

< content-length: 1153

* Closing connection 0

{"url":"/server/error","statusCode":500,"statusMessage":"Internal Server Error","message":"hoge","stack":"<pre><span class=\"stack\">at ./.nuxt/dev/index.mjs:376:8</span>\n<span class=\"stack internal\">at Layer.handle [as handle_request] (./node_modules/express/lib/router/layer.js:95:5)</span>\n<span class=\"stack internal\">at next (./node_modules/express/lib/router/route.js:144:13)</span>\n<span class=\"stack internal\">at Route.dispatch (./node_modules/express/lib/router/route.js:114:3)</span>\n<span class=\"stack internal\">at Layer.handle [as handle_request] (./node_modules/express/lib/router/layer.js:95:5)</span>\n<span class=\"stack internal\">at ./node_modules/express/lib/router/index.js:284:15</span>\n<span class=\"stack internal\">at Function.process_params (./node_modules/express/lib/router/index.js:346:12)</span>\n<span class=\"stack internal\">at next (./node_modules/express/lib/router/index.js:280:10)</span>\n<span class=\"stack internal\">at Function.handle (./node_modules/express/lib/router/index.js:175:3)</span>\n<span class=\"stack internal\">at router (./node_modules/express/lib/router/index.js:47:12)</span></pre>"}(

json形式で受け取りたい場合は、１つの方法として、fetchのリクエストヘッダでacceptを設定すれば良さそう？です。

<script lang="ts" setup>
const data = ref();
onMounted(async () => {
// クライアント側でのリクエスト情報を見るためここでfetch
const { data: d, refresh } = await useFetch("/server/error", {
retry: 0,
headers: {
Accept: "application/json",
},
});
data.value = d;
refresh();
});
</script>
<template>
<div>
{{ data }}
<NuxtWelcome />
</div>
</template>

const data = ref();

onMounted(async () => {

// クライアント側でのリクエスト情報を見るためここでfetch

const { data: d, refresh } = await useFetch("/server/error", {

retry: 0,

headers: {

Accept: "application/json",

});

data.value = d;

refresh();

});

</script>

<div>

</div>

</template>

まだRC版で開発も活発のため変更もあるかもしれませんが、現在の最新版での動作を確認してみました。参考になれば幸いです。

参考リンク

Vue3 provideしたコンポーネントでinject

コメントを残す

vee-validateを見ていて、なるほどこれは参考になると思ったのでメモ。

provide/injectについて、provideで提供したオブジェクトは子ノードでinjectすることで子ノード内に依存関係を持ち込むことができる。provideしたコンポーネント自身でinjectしたい場合（injectしたように）はどうすればよいのか。vee-validateでは以下のようにしていた。

// @see https://github.com/logaretm/vee-validate
export function injectWithSelf<T>(symbol: InjectionKey<T>, def: T | undefined = undefined): T | undefined {
const vm = getCurrentInstance() as any
return vm?.provides[symbol as any] || inject(symbol, def)
}

// @see https://github.com/logaretm/vee-validate

export function injectWithSelf<T>(symbol: InjectionKey<T>, def: T | undefined = undefined): T | undefined {

const vm = getCurrentInstance() as any

return vm?.provides[symbol as any] || inject(symbol, def)

}

参照元：https://github.com/logaretm/vee-validate/blob/main/packages/vee-validate/src/utils/common.ts#L143

Nuxt3でvee-validate4（Composable API）を使う

コメントを残す

引き続きNuxt3のトピックです。

Vue3のUIフレームワークであるvee-validateの組み合わせでフォームのバリデーションを組んでみます。というのも、vee-validate4の使用について少しハマってしまったので、その備忘録をかねて記述しています。

インストールと設定

Nuxt3とvee-validate4をインストールします。

npx nuxi init nuxt-app
cd nuxt-app
npm install
npm i vee-validate @vee-validate/i18n @vee-validate/rules
npm install --dev sass

npx nuxi init nuxt-app

cd nuxt-app

npm install

npm i vee-validate @vee-validate/i18n @vee-validate/rules

npm install --dev sass

今回は、i18nとルール、それからsassも一緒に入れておきます。

また、プラグイン定義でルールやロケールを設定します。

import { localize, setLocale } from "@vee-validate/i18n";
import en from "@vee-validate/i18n/dist/locale/en.json";
import ja from "@vee-validate/i18n/dist/locale/ja.json";
import AllRules from "@vee-validate/rules";
import { defineRule, configure } from "vee-validate";
import { defineNuxtPlugin } from "#app";
export default defineNuxtPlugin((_nuxtApp) => {
configure({
generateMessage: localize({
en,
ja,
}),
});
Object.keys(AllRules).forEach((rule) => {
defineRule(rule, AllRules[rule]); // 全ルールを使えるようにする
});
setLocale("ja");
});

import { localize, setLocale } from "@vee-validate/i18n";

import en from "@vee-validate/i18n/dist/locale/en.json";

import ja from "@vee-validate/i18n/dist/locale/ja.json";

import AllRules from "@vee-validate/rules";

import { defineRule, configure } from "vee-validate";

import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin((_nuxtApp) => {

configure({

generateMessage: localize({

en,

ja,

}),

});

Object.keys(AllRules).forEach((rule) => {

defineRule(rule, AllRules[rule]); // 全ルールを使えるようにする

});

setLocale("ja");

});

Filedのバリデーション

実際の使用例を見てみてます。今回の記事では、Composable APIを使うケースを想定しています。

<script lang="ts" setup>
import { useField } from "vee-validate";
const { value: username, errorMessage: usernameError } = useField(
"username",
"required|min:2", // バリデーションルールを文字列形式で指定
);
const { value: email, errorMessage: emailError } = useField(
"email",
"required|email", // バリデーションルールを文字列形式で指定
);
const submit = () => {
console.log(username.value, email.value);
};
</script>
<template>
<div class="form">
<div class="field">
<label for="username">username</label>
<input type="text" v-model="username" name="username" />
<small v-if="usernameError"
><span class="invalid">{{ usernameError }}</span></small
>
</div>
<div class="field">
<label for="email">email</label>
<input
type="text"
v-model="email"
name="email"
placeholder="admin@example.com"
/>
<small v-if="emailError"
><span class="invalid">{{ emailError }}</span></small
>
</div>
<div class="field">
<button type="button" @click="submit">登録</button>
</div>
</div>
</template>
<style lang="scss" scoped>
html {
font-size: 14px;
}
.form {
.field {
padding: 0.5rem 0;
}
input {
width: 15rem;
display: block;
}
label {
display: block;
font-weight: bold;
}
.invalid {
color: red;
}
}
</style>

import { useField } from "vee-validate";

const { value: username, errorMessage: usernameError } = useField(

"username",

"required|min:2", // バリデーションルールを文字列形式で指定

);

const { value: email, errorMessage: emailError } = useField(

"email",

"required|email", // バリデーションルールを文字列形式で指定

);

const submit = () => {

console.log(username.value, email.value);

};

</script>

<label for="username">username</label>

<small v-if="usernameError"

><span class="invalid">{{ usernameError }}</span></small

</div>

<label for="email">email</label>

<input

type="text"

v-model="email"

name="email"

placeholder="admin@example.com"

<small v-if="emailError"

><span class="invalid">{{ emailError }}</span></small

</div>

</div>

</template>

html {

font-size: 14px;

}

.form {

.field {

padding: 0.5rem 0;

}

input {

width: 15rem;

display: block;

}

label {

display: block;

font-weight: bold;

}

.invalid {

color: red;

}

</style>

useFieldでフォームフィールドごとの定義をしています。useFieldは、valueやerrorMessageといったオブジェクトを返します。

実際に動かした画面は以下のようになります。

Formのバリデーション

続いてFormのケースです。useFormというComposable APIを使います。

<script lang="ts" setup>
import { useForm, useField } from "vee-validate";
const { handleSubmit, errors } = useForm({
validationSchema: {
username: "required|min:2",
email: "required|email",
},
});
const { value: username } = useField("username");
const { value: email } = useField("email");
const submit = handleSubmit(() => {
console.log(username.value, email.value);
});
</script>
<template>
<div class="form">
<div class="field">
<label for="username">username</label>
<input type="text" v-model="username" name="username" />
<small v-if="errors.username"
><span class="invalid">{{ errors.username }}</span></small
>
</div>
<div class="field">
<label for="email">email</label>
<input
type="text"
v-model="email"
name="email"
placeholder="admin@example.com"
/>
<small v-if="errors.email"
><span class="invalid">{{ errors.email }}</span></small
>
</div>
<div class="field">
<button type="button" @click="submit">登録</button>
</div>
</div>
</template>
<style lang="scss" scoped>
html {
font-size: 14px;
}
.form {
.field {
padding: 0.5rem 0;
}
input {
width: 15rem;
display: block;
}
label {
display: block;
font-weight: bold;
}
.invalid {
color: red;
}
}
</style>

import { useForm, useField } from "vee-validate";

const { handleSubmit, errors } = useForm({

validationSchema: {

username: "required|min:2",

email: "required|email",

});

const { value: username } = useField("username");

const { value: email } = useField("email");

const submit = handleSubmit(() => {

console.log(username.value, email.value);

});

</script>

<label for="username">username</label>

<small v-if="errors.username"

><span class="invalid">{{ errors.username }}</span></small

</div>

<label for="email">email</label>

<input

type="text"

v-model="email"

name="email"

placeholder="admin@example.com"

<small v-if="errors.email"

><span class="invalid">{{ errors.email }}</span></small

</div>

</div>

</template>

html {

font-size: 14px;

}

.form {

.field {

padding: 0.5rem 0;

}

input {

width: 15rem;

display: block;

}

label {

display: block;

font-weight: bold;

}

.invalid {

color: red;

}

</style>

useFieldで定義していたバリデーションをuseFormで指定しています。useFieldは、useFormのformを自動的に検出してくれます。実際には、provide/injectの仕組みが内部で使用されており、useFormやuseFieldの呼び出し時にそれぞれ固有のSymbolでコンテキストがprovideされています。useFieldは、useFormでprovideされたformコンテキストを自身のコンポーネント内でinjectしています。そのため、上記の例で言うと、useFieldを先に呼び出し、useFormを後で呼び出すとuseFieldがformコンテキストを探せず期待した動きにならないことがあります（私自身ややハマってしまった）。初回表示時にuseFormがfieldを見つけられずエラーと扱ってしまいます。

<script lang="ts" setup>
import { useForm, useField } from "vee-validate";
const { value: username } = useField("username");
const { value: email } = useField("email");
const { handleSubmit, errors } = useForm({
validationSchema: {
username: "required|min:2",
email: "required|email",
},
});
const submit = handleSubmit(() => {
console.log(username.value, email.value);
});
</script>

import { useForm, useField } from "vee-validate";

const { value: username } = useField("username");

const { value: email } = useField("email");

const { handleSubmit, errors } = useForm({

validationSchema: {

username: "required|min:2",

email: "required|email",

});

const submit = handleSubmit(() => {

console.log(username.value, email.value);

});

</script>

実際に上記例を動かすと、ページ表示時にバリデーションエラーが表示されてしまい期待した動きになりませんでした。

まとめ

Nuxt3とvee-validateの組み合わせを試してみました。Composable APIで簡単にフォームバリデーションを導入することができます。

本サンプルは以下になります。

https://github.com/moritetu/nuxt3-vee-validate-sample

参考リンク

https://vee-validate.logaretm.com/v4/
vee-validateの公式サイトです。
https://github.com/logaretm/vee-validate
vee-validateのGitリポジトリです。
https://reffect.co.jp/vue/veevaliate4
使い方がとても詳しく説明されており大変参考になります。

Nuxt3 ページごとにタイトルを変える

コメントを残す

Nuxt3でページごとにタイトルを変える方法について記述します。正式リリースされていないので変わる可能性もゼロではないですが。

https://v3.nuxtjs.org/guide/features/head-management#title-templates

useHeadとtitleTemplateを使う

app.vueでtitleTemplateを使います。pagesディレクトリにページごとにコンポーネントを置く想定です。config.public.appNameにアプリケーション名を定義したとします。

<script lang="ts" setup>
const config = useRuntimeConfig()
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - ${config.public.appName}` : config.public.appName
},
})
</script>
<template>
<div>
<NuxtLayout>
<NuxtLoadingIndicator />
<NuxtPage />
</NuxtLayout>
</div>
</template>

const config = useRuntimeConfig()

useHead({

titleTemplate: (titleChunk) => {

return titleChunk ? `${titleChunk} - ${config.public.appName}` : config.public.appName

})

</script>

<div>

</NuxtLayout>

</div>

</template>

続いて、以下のようにページに定義します。

<script setup lang="ts">
useHead({ title: 'サンプルページ' })
</script>
<template>
<div>サンプルページ</div>
</template>

useHead({ title: 'サンプルページ' })

</script>

<div>サンプルページ</div>

</template>

definePageMetaを使う

pageでtitleを定義して、例えばレイアウトとかでuseHeadで設定する。

pageでdefinePageMetaで定義する。

<script setup lang="ts">
definePageMeta({
title: 'Some Page',
})
</script>
<template>
<div>サンプルページ</div>
</template>

definePageMeta({

title: 'Some Page',

})

</script>

<div>サンプルページ</div>

</template>

レイアウトでmetaデータを取得しuseHeadで設定します。

<script lang="ts" setup>
const route = useRoute()
useHead({ title: route.meta.title as string })
</script>

const route = useRoute()

useHead({ title: route.meta.title as string })

</script>

Nuxt3でページにstyleを適用する

コメントを残す

Nuxt3でページにスタイルを指定する方法についてです。

Headタグ使う

SFC内に以下のように記述する事でスタイル指定が可能です。

<template>
<div>
<Head>
<Style type="text/css" children="body { background-color: green; }" />
<Style type="text/css">body { background-color: green; }</Style>
</Head>
</div>
</template>

<div>

<Head>

<Style type="text/css">body { background-color: green; }</Style>

</Head>

</div>

</template>

useHeadを使う

Composable APIを使ってscript setupに書くこともできます。

<script setup>
definePageMeta({
layout: 'none',
})
useHead({
script: [
{
src: '/js/three.min.js',
},
],
style: [{ type: 'text/css', children: 'html,body { margin: 0; width: 100%; height: 100%; overflow: hidden;}' }],
})
</script>

definePageMeta({

layout: 'none',

})

useHead({

script: [

{

src: '/js/three.min.js',

style: [{ type: 'text/css', children: 'html,body { margin: 0; width: 100%; height: 100%; overflow: hidden;}' }],

})

</script>

useHeadとStyleタグの両方を指定しても問題ないようです。両方の指定が出力されます。

参考リンク

https://v3.nuxtjs.org/guide/features/head-management/

デバッグライフ

プログラミングや日常の記録など

「IT」カテゴリーアーカイブ

Nuxt3でExpressを使ってみる

はじめに

Nuxt3とExpressのインストール

serverHandlerの作成

expressの設定

node-server向けにビルド

APIのエラー時の挙動はどうなるか？

参考リンク

Vue3 provideしたコンポーネントでinject

Nuxt3でvee-validate4（Composable API）を使う

インストールと設定

Filedのバリデーション

Formのバリデーション

まとめ

参考リンク

Nuxt3 ページごとにタイトルを変える

useHeadとtitleTemplateを使う

definePageMetaを使う

Nuxt3でページにstyleを適用する

Headタグ使う

useHeadを使う

参考リンク