The hooks property

Hooks are listeners to Nuxt events that are typically used in Nuxt modules, but are also available in nuxt.config.js. menu: hooks

  • Type: 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')
      }
    }
  }
}

Internally, hooks follow a naming pattern using colons (e.g., build:done). For ease of configuration, you can structure them as an hierarchical object when using nuxt.config.js (as exemplified above) to set your own hooks. See Nuxt Internals for more detailed information on how they work.

List of hooks

Examples

Redirect to router.base when not on root

Let´s say you want to serve pages as /portal instead of /.

This is maybe an edge-case, and the point of nuxt.config.js’ router.base is for when a web server will serve Nuxt elsewhere than the domain root.

But when in local development, hitting localhost, when router.base is not / returns a 404. In order to prevent this, you can setup a Hook.

Maybe redirecting is not the best use-case for a production Web site, but this will help you leverage Hooks.

To begin, you can change router.base ; Update your nuxt.config.js:

nuxt.config.js
import hooks from './hooks'
export default {
  router: {
    base: '/portal'
  }
  hooks: hooks(this)
}

Then, create a few files;

  1. hooks/index.js, Hooks module
    hooks/index.js
    import render from './render'

export default nuxtConfig => ({
  render: render(nuxtConfig)
})
  2. hooks/render.js, Render hook
    hooks/render.js
    import 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))
    }
  }
}
  3. hooks/route-redirect-portal.js, The Middleware itself
    hooks/route-redirect-portal.js
    /**
 * Nuxt middleware hook to redirect from / to /portal (or whatever we set in nuxt.config.js router.base)
 *
 * Should be the same version as connect
 * {@link node_modules/connect/package.json}
 */
import parseurl from 'parseurl'

/**
 * Connect middleware to handle redirecting to desired Web Application Context Root.
 *
 * Notice that Nuxt docs lacks explaining how to use hooks.
 * This is a sample router to help explain.
 *
 * See nice implementation for inspiration:
 * - https://github.com/nuxt/nuxt.js/blob/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 internal client request object [http_class_http_clientrequest]
 * @param {http.ServerResponse} res Node.js internal response [http_class_http_serverresponse]
 * @param {Function} next middleware callback
 */
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()
  }

Then, whenever a colleague in development accidentally hits / to reach the development web development service, Nuxt will automatically redirect to /portal