hooks プロパティ
フックは Nuxt モジュールで一般的に使われる Nuxt イベントリスナー だけでなく nuxt.config.js
でも利用できます。
-
型:
Object
nuxt.config.js
import fs from 'fs'
import path from 'path'
export default {
hooks: {
build: {
done(builder) {
const extraFilePath = path.join(
builder.nuxt.options.buildDir,
'extra-file'
)
fs.writeFileSync(extraFilePath, 'Something extra')
}
}
}
}
内部的には、フックはコロン(例えば build:done
)を使った命名パターンに従います。設定を簡単にするため、上記の例のように独自のフックを nuxt.config.js
に設定すると、それらを階層オブジェクトとして構造化できます。仕組みの詳細については Nuxt の内部 を参照してください。
フックのリスト
例
root でない場合は router.base にリダイレクトさせる
ページを /
のかわりに /portal
として提供するとします。
これはおそらくエッジケースであり、nuxt.config.js の router.base
のポイントは web サーバーがドメインルート以外の場所で Nuxt を提供するときのためのものです。
しかしローカル開発中に localhost にアクセスすると router.base が / でない場合は 404 が返されます。フックを設定することでこれを防げます。
リダイレクトはプロダクション用の Web サイトでは最適なユースケースではないかもしれませんがフックを活用するのに役立ちます。
まずはじめに、router.base
を変更できます 。nuxt.config.js
を更新してみましょう:
nuxt.config.js
import hooks from './hooks'
export default {
router: {
base: '/portal'
}
hooks: hooks(this)
}
そしていくつかファイルを作成します。
-
フックモジュールである
hooks/index.js
hooks/index.jsimport render from './render' export default nuxtConfig => ({ render: render(nuxtConfig) })
-
レンダーフックである
hooks/render.js
hooks/render.jsimport redirectRootToPortal from './route-redirect-portal' export default nuxtConfig => { const router = Reflect.has(nuxtConfig, 'router') ? nuxtConfig.router : {} const base = Reflect.has(router, 'base') ? router.base : '/portal' return { /** * 'render:setupMiddleware' * {@link node_modules/nuxt/lib/core/renderer.js} */ setupMiddleware(app) { app.use('/', redirectRootToPortal(base)) } } }
-
ミドルウェア自体である
hooks/route-redirect-portal.js
hooks/route-redirect-portal.js/** * /portalから / へリダイレクトするための Nuxt ミドルウェアフック(または nuxt.config.js の router.base で設定したもの) * * connect と同じバージョンにしてください * {@link node_modules/connect/package.json} */ import parseurl from 'parseurl' /** * 目的の Web アプリケーションコンテキストルートへのリダイレクト処理をするためのミドルウェアに接続します。 * * Nuxt のドキュメントにはフックの使い方の説明が欠けていることに注意してください * これは補足説明として役立つルーターのサンプルです。 * * インスピレーションのために素晴らしい実装を見てみましょう: * - https://github.com/nuxt/nuxt/blob/2.x-dev/examples/with-cookies/plugins/cookies.js * - https://github.com/yyx990803/launch-editor/blob/master/packages/launch-editor-middleware/index.js * * [http_class_http_clientrequest]: https://nodejs.org/api/http.html#http_class_http_clientrequest * [http_class_http_serverresponse]: https://nodejs.org/api/http.html#http_class_http_serverresponse * * @param {http.ClientRequest} req Node.jsの内部的なクライアントリクエストオブジェクト [http_class_http_clientrequest] * @param {http.ServerResponse} res Node.jsの内部的なレスポンス [http_class_http_serverresponse] * @param {Function} next ミドルウェアのコールバック */ export default desiredContextRoot => function projectHooksRouteRedirectPortal(req, res, next) { const desiredContextRootRegExp = new RegExp(`^${desiredContextRoot}`) const _parsedUrl = Reflect.has(req, '_parsedUrl') ? req._parsedUrl : null const url = _parsedUrl !== null ? _parsedUrl : parseurl(req) const startsWithDesired = desiredContextRootRegExp.test(url.pathname) const isNotProperContextRoot = desiredContextRoot !== url.pathname if (isNotProperContextRoot && startsWithDesired === false) { const pathname = url.pathname === null ? '' : url.pathname const search = url.search === null ? '' : url.search const Location = desiredContextRoot + pathname + search res.writeHead(302, { Location }) res.end() } next() }
これで、開発中の Web サービスで同僚が誤って /
にアクセスしても Nuxt は自動的に /portal
にリダイレクトするでしょう。
このページをGitHubで編集する
更新日 Mon, Aug 19, 2024












































