Accessing rendered HTML in Nuxt hook in order to process and potentially modify final HTML output

Describe the feature

There was a brief moment during RC7 where the app:rendered hook was called with the constructed HTML output at which point we were able to access the output and modify it if necessary. In Nuxt 2, we made use of the vue-renderer:ssr:templateParams hook for this purpose. Our specific use-case is to process the final HTML with Twind to transform our CSS classes and to inject a stylesheet into the head. We’re not interested in modifying the ssrContext at this point.

If there is a way to bring back this functionality, it would be greatly appreciated.

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[pi0]

Glad you liked the module 😊 And sure your usecase makes sense and we can make it working using event context. Do you mind to open an issue in my moduls? i can give more details if you like to help on implementing this mode 👍

[tylerforesthauser]

OK, first off, you are amazing @pi0 ! I find it hilarious that I wake up this morning to see that you’ve come so far as to create a Nuxt module for Twind integration 😄

I am excited to try it out! In the meantime, I just wanted to say thank you for looking into this and let you know a brief rundown of how I’m using Twind.

I’m using it in Library Mode where I’ve created a plugin to build my global utility that I use to apply styles to all of my components.

The plugin code looks a little something like this:

import { twind, injectGlobal, tx, stringify, getSheet } from 'twind'
import { config } from '~/twind.config'
import { globalStyles } from '~/twind.global'

export default defineNuxtPlugin((nuxtApp) => {
  const instance = twind(config, getSheet())

  const tw = tx.bind(instance)

  const injectGlobalStyles = injectGlobal.bind(instance)
  injectGlobalStyles(globalStyles)

  if (process.server) {
    useHead(() => ({
      style: [{ children: `${stringify(instance.target)}`, type: 'text/css', 'data-twind': true }],
    }))
  }

  nuxtApp.provide('twind', { tw, instance })
})

This does a few things for me:

1. Creates a Twind instance that I can use to access my config, theme, etc on demand.
2. Creates a tx utility which accepts virtually any assortment of Twind classes/functions, creates the appropriate class and injects the styles into the instance stylesheet.
3. Adds some global styles for things like custom fonts, etc.
4. Injects the stylesheet into the head.
5. Then, of course, provides this information to my app context.

My intention with the app:rendered hook was to provide this instance to the extract function (that you’ve used for your module) in order to process my app’s HTML output.

The reason why I believed using the same instance is important is because Twind’s virtual sheet (used server-side) includes “resume data” that the Twind runtime can use to avoid duplicating the work client-side. What I’m not sure of is whether or not this data is unique to the instance or is generated in a way that simply creating another instance for the Nitro plugin with the same config would be enough…

So when I get a chance, I’ll fire up a sandbox and test some stuff out with your module. I honestly believe you’ve given me all the tools I’d need to make this work. Thank you so much! 🙏

I’ll report back with my findings. 👍