Skip to content
This repository was archived by the owner on Apr 6, 2023. It is now read-only.
/frameworkPublic archive

feat(nuxt): app:rendered hook - #6042

Merged
pi0 merged 18 commits into
mainfrom
feat/render-hooks
Jul 27, 2022
Merged

feat(nuxt): app:rendered hook#6042
pi0 merged 18 commits into
mainfrom
feat/render-hooks

Conversation

@pi0

@pi0pi0 commented Jul 21, 2022•
edited
Loading

Copy link
Copy Markdown
Member

🔗 Linked issue

Resolvesnuxt/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.tsexportdefaultdefineNitroPlugin((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)

exportdefaultdefineNitroPlugin((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)

exportdefaultdefineNuxtPlugin((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

netlifyBot commented Jul 21, 2022•
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for nuxt3-docs canceled.

NameLink
🔨 Latest commit0e1c1c1
🔍 Latest deploy loghttps://app.netlify.com/sites/nuxt3-docs/deploys/62e10a120cd2bc0009c961f8

@pi0pi0 changed the title feat(nuxt): add app:rendered hookfeat(nuxt): add app:rendered hooksJul 21, 2022
@pi0
pi0 marked this pull request as ready for review July 21, 2022 17:44
@pi0
pi0 requested a review from danielroeJuly 21, 2022 17:44
@pi0pi0 mentioned this pull request Jul 21, 2022
Closed
6 tasks
danielroe
danielroe reviewed Jul 25, 2022
View reviewed changes
Comment threadpackages/nuxt/src/core/runtime/nitro/renderer.ts Outdated
danielroe
danielroe reviewed Jul 25, 2022
View reviewed changes
Comment threadpackages/nuxt/src/core/runtime/nitro/renderer.ts Outdated
pi0and 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>
danielroe
danielroe reviewed Jul 25, 2022
View reviewed changes
Comment threadpackages/nuxt/src/core/runtime/nitro/renderer.ts Outdated
danielroe
danielroe reviewed Jul 25, 2022
View reviewed changes
Comment threadpackages/nuxt/src/core/runtime/nitro/renderer.ts Outdated
@antfu

antfu commented Jul 26, 2022

Copy link
Copy Markdown
Member

Love the format! 👍

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

Reviewers

1 more reviewer
@danielroedanielroedanielroe approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

3.xenhancementNew 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