Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

feat(nuxt): app:rendered hook #6042

Merged
merged 18 commits into from
Jul 27, 2022
Merged

feat(nuxt): app:rendered hook #6042

merged 18 commits into from
Jul 27, 2022

Conversation

pi0
Copy link
Member

@pi0 pi0 commented Jul 21, 2022 •
edited
Loading

🔗 Linked issue

Resolves nuxt/nuxt#14182 (compatible with nuxt/nuxt#14195)

❓ Type of change

  • 📖 Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality like performance)
  • ✨ New feature (a non-breaking change that adds functionality)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Update: [rc-7] Check #6442. nuxt:app:response nitro hook is changed to render:response
Update: [rc-8] Chceck #6521: render:html is new nitro hook to access html context. (app:rendered has not acess to it anymore)

Example usage: (nitro plugin with rc-8)

// server/plugins/render.ts
export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => { console.log({ html }) })
  nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})

This PR adds new nuxt:app:rendered and nuxt:app:response nitro hooks and also provides same render context to the existing app:rendered hook usable in Nuxt plugins.

A small additional charge, X-Powered-By: Nuxt header is now added to the default response. It can be disabled with nitro plugin and nuxt:app:response hook.

Introducing external types for nitro in subsequent PR ~> nuxt/nuxt#14449

Example usage: (nitro server plugin)

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('nuxt:app:rendered', ({ ssrContext, html }) => { console.log({ html }) })
  nitroApp.hooks.hook('nuxt:app:response', ({ response }) => { console.log(response) })
})

Example usage: (nuxt plugin)

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:rendered', ({ ssrContext, html }) => {
    console.log({ html })
  })
})

Example output:

{
  html: {
    htmlAttrs: [ 'data-head-attrs=""' ],
    head: [
      '<title></title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2">',
      '<link rel="modulepreload" href="/_nuxt/@vite/client" as="script" crossorigin><link rel="preload" href="/_nuxt/@fs/home/pooya/Code/framework/node_modules/@nuxt/ui-templates/dist/templates/error-404.vue?vue&type=style&index=0&scoped=8dd555df&lang.css" as="style"><link rel="preload" href="/_nuxt/@fs/home/pooya/Code/framework/node_modules/@nuxt/ui-templates/dist/templates/error-dev.vue?vue&type=style&index=0&scoped=f1f2d31d&lang.css" as="style"><link rel="preload" href="/_nuxt/@fs/home/pooya/Code/framework/node_modules/@nuxt/ui-templates/dist/templates/error-500.vue?vue&type=style&index=0&scoped=979ee0c7&lang.css" as="style"><link rel="modulepreload" href="/_nuxt/entry.mjs" as="script" crossorigin>',
      '<link rel="stylesheet" href="/_nuxt/@fs/home/pooya/Code/framework/node_modules/@nuxt/ui-templates/dist/templates/error-404.vue?vue&type=style&index=0&scoped=8dd555df&lang.css"><link rel="stylesheet" href="/_nuxt/@fs/home/pooya/Code/framework/node_modules/@nuxt/ui-templates/dist/templates/error-dev.vue?vue&type=style&index=0&scoped=f1f2d31d&lang.css"><link rel="stylesheet" href="/_nuxt/@fs/home/pooya/Code/framework/node_modules/@nuxt/ui-templates/dist/templates/error-500.vue?vue&type=style&index=0&scoped=979ee0c7&lang.css">'
    ],
    bodyAttrs: [ 'data-head-attrs=""' ],
    bodyPreprend: [],
    body: [
      '<div id="__nuxt"><!--[--><!-- Edit this file to play around with Nuxt but never commit changes! --><div> Nuxt 3 Playground </div><!--]--></div>'
    ],
    bodyAppend: [
      '<script>window.__NUXT__={data:{},state:{$serror:null},_errors:{},serverRendered:true,config:{public:{},app:{baseURL:"\\u002F",buildAssetsDir:"\\u002F_nuxt\\u002F",cdnURL:""}}}</script>',
      '<script type="module" src="/_nuxt/@vite/client" crossorigin></script><script type="module" src="/_nuxt/entry.mjs" crossorigin></script>'
    ]
  }
}
{
  body: '<!DOCTYPE html>...............</html>',
  statusCode: 200,
  statusMessage: undefined,
  headers: { 'Content-Type': 'text/html;charset=UTF-8', 'X-Powered-By': 'Nuxt' }
}

@netlify
Copy link

netlify bot commented Jul 21, 2022 •
edited
Loading

✅ Deploy Preview for nuxt3-docs canceled.

Name Link
🔨 Latest commit 0e1c1c1
🔍 Latest deploy log https://app.netlify.com/sites/nuxt3-docs/deploys/62e10a120cd2bc0009c961f8

@pi0 pi0 changed the title feat(nuxt): add app:rendered hook feat(nuxt): add app:rendered hooks Jul 21, 2022
@pi0 pi0 marked this pull request as ready for review July 21, 2022 17:44
@pi0 pi0 requested a review from danielroe July 21, 2022 17:44
@pi0 pi0 mentioned this pull request Jul 21, 2022
Closed
6 tasks
pi0 and others added 2 commits July 25, 2022 16:55
@pi0 @danielroe
Update packages/nuxt/src/core/runtime/nitro/renderer.ts
93ee522 
Co-authored-by: Daniel Roe <daniel@roe.dev>
@pi0 @danielroe
Update packages/nuxt/src/core/runtime/nitro/renderer.ts
57b0b1b 
Co-authored-by: Daniel Roe <daniel@roe.dev>
@antfu
Copy link
Member

antfu commented Jul 26, 2022

Love the format! 👍

@danielroe danielroe added the enhancement New feature or request label Jul 27, 2022
@pi0 pi0 mentioned this pull request Jan 19, 2023
Open
@pi0 pi0 changed the title feat(nuxt): add app:rendered hooks feat(nuxt): app:rendered and app:response hooks Jul 27, 2022
@pi0 pi0 merged commit f58aa81 into main Jul 27, 2022
@pi0 pi0 deleted the feat/render-hooks branch July 27, 2022 09:53
@pi0 pi0 mentioned this pull request Aug 5, 2022
Merged
@pi0 pi0 changed the title feat(nuxt): app:rendered and app:response hooks feat(nuxt): app:rendered hook Aug 9, 2022
@pi0 pi0 mentioned this pull request Aug 11, 2022
Merged
6 tasks
@danielroe danielroe mentioned this pull request Sep 21, 2022
Merged
7 tasks
@danielroe danielroe added the 3.x label Jan 19, 2023
@manniL manniL mentioned this pull request Jun 14, 2023
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@danielroe danielroe danielroe approved these changes

Assignees
No one assigned
Labels
3.x enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Allow hooking into render context
3 participants
@pi0 @antfu @danielroe