Add a hook after rendering the vue server component to modify html content

[Groupguanfang]

Body

Summary

Now @astrojs/vue only provides an appEntrypoint attribute, which specifies the path of an entry file, and then modifies the root vue component:

// src/pages/_app.ts
import { type App } from 'vue';


export default (app: App) => {
  // Make modifications to the root vue component...
};

This function will be called here through the virtual module. This function will be called here through the virtual module. Now can we add a closure function to this function so that it can directly modify the pure html string after renderToString render in the closure function?

// src/pages/_app.ts
import { type App } from 'vue';


export default (app: App) => {
  // Make modifications to the root vue component...
  // Return a function with an html parameter. You can return the changed html string
  return (html: string): string => {
     return html + `<style>/* Such as your css, and more... */</style>`
  }
};

Background & Motivation

I using naive-ui, In naive ui, it needs to collect css through the root vue component and attach it to html, like the method in their official website: https://www.naiveui.com/en-CN/os-theme/docs/vite-ssge.

If astro implements this proposal, then it will be convenient to integrate naive ui like this:

import { type App } from 'vue';
import { setup } from '@css-render/vue3-ssr'


export default (app: App) => {
  const { collect } = setup(app)
  
  return async (html: string): Promise<string> => {
    return html + collect()
  }
};

Goals

A concise, bulleted-list outlining the intended goals of this RFC.

• Let astro fully adapt to naive ui
• Allows any user to change the generated vue html string.

[nVitius]

Currently trying to use naive-ui inside an Astro project. Also running into these issues: it is not possible to use SSR/SSG at the moment.

@Groupguanfang have you found any workarounds? I've set all my components to client:only="vue" for the time being.

[Groupguanfang]

You can take a look at the issue comment I wrote（This is also my GitHub account, haha）：tusen-ai/naive-ui#5713 (comment)

After the above configuration, it can be used normally in the current astro version; but the style is still not rendered on the server. If you want to solve this problem, you need to solve this proposal first. So, you know…😗I think someone should help promote this proposal together.

[nVitius]

I started looking into this a bit, and made a tiny bit of progress. I made some changes to packages/integrations/vue/server.js that made this sort-of work. Mind you, this isn't adding a hook but just testing the usability of css-render in the Vue plugin:

This lets the naive components render in an SSR context correctly, but it adds the stylesheets alongside the rendered content, within the island, as opposed to inside the document head.

I think this is a good start though. I'll keep looking into the Astro internals to see what I find.