You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

Translated page Contents of this page might be outdated.

A propriedade hooks

Gatilhos são observadores para os eventos do Nuxt que são normalmente são usados dentro dos módulos do Nuxt, porém estão disponíveis dentro do ficheiro nuxt.config.js.


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

Internamente, gatilhos seguem um padrão de nomeação que usa dois pontos (por exemplo, build:done). Para facilitação da configuração, você pode estruturar eles como um objeto hierárquico quando estiver usando um ficheiro nuxt.config.js (como exemplificado acima) para definir seus próprios gatilhos. Consulte o Interior do Nuxt para ter acesso a informações mais detalhadas de como eles funcionam.

Lista de Gatilhos

Exemplos

Redirecionar para router.base quando não estiver na raiz

Vamos dizer que você quer servir páginas como /portal ao invés de /.

Isto pode ser um caso estremo, e a finalidade do router.base do nuxt.config.js é para quando um servidor web servir o Nuxt em algum lugar além da raiz do domínio.

Mas em ambiente de desenvolvimento local, acertar o localhost, quando o router.base não é / retorna um 404. No sentido de prevenir isso, você pode definir um gatilho (Hook).

Talvez o redirecionamento não seja o melhor caso de uso para sítio da web em produção, mas isso ajudará você influenciar os gatilhos.

Para começar, você pode mudar o router.base ; Atualize o seu ficheiro nuxt.config.js:

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

Depois, crie alguns ficheiros;

  1. hooks/index.js, módulo de gatilhos
    hooks/index.js
    import render from './render'
    
    export default nuxtConfig => ({
      render: render(nuxtConfig)
    })
    
  2. hooks/render.js, gatilho render
    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, O próprio intermédiario
    hooks/route-redirect-portal.js
    /**
     * Intermediário de gatilho do Nuxt para redirecionar de `/` para `/portal` (ou para o que definimos no router.base do nuxt.config.js)
     *
     * Deve ser a mesma versão que o connect
     * {@link node_modules/connect/package.json}
     */
    import parseurl from 'parseurl'
    
    /**
     * Conecta o intermediário para manipular o redirecionamento para Raiz do Contexto da Aplicação Web desejada.
     *
     * Note que a documentação do Nuxt carece de explicação de como usar gatilhos.
     * Isto é um roteador de exemplo para ajudar a explicar.
     *
     * Consulte boas implementações para obter inspiração:
     * - 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 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()
      }
    

Então, sempre que um colega em desenvolvimento acidentalmente bater em / para alcançar o desenvolvimento do serviço de desenvolvimento web, o Nuxt irá redirecionar automaticamente para /portal