How to confirm SSR-rendered HTML

Question

In Nuxt 3, you can confirm whether server-side rendering has completed with the following code, but is it possible to obtain the HTML generated after rendering has finished? I would like to check the state before client-side rendering takes place.

const app = useNuxtApp();
app.hook('app:rendered', () => {
  console.log('app:rendered');
});

I looked at the following page but couldn't find what I was looking for. If anyone knows the method, I would appreciate it if you could let me know.

https://nuxt.com/docs/api/composables/use-nuxt-app

https://nuxt.com/docs/api/advanced/hooks

Answer 1

app:beforeMount is what you are looking for. It works on client side and it is the first part on client side before every things. There are several hook points:

1.app:created 
2.app:rendered 
3.app:beforeMount 
4.app:mounted

"app:mounted" is when all thing ready to send to browser.

const app = useNuxtApp();
app.hook('app:rendered or what hook you want', () => {
  console.log('app:rendered or what hook you want');
});

this above you can just use in app.vue file in the main root. Otherwise either you should write a pluging or define the hook in your nuxt.config.ts file.

I prepare a code that works in plugin. because it is better and cleaner, in my opinion. you should make a file and folder if not exist in the main root.

plugings/myplugin.js

export default defineNuxtPlugin((NuxtApp) => {
  NuxtApp.hook('app:rendered or what hook you want', async () => {
    console.log('app:rendered or what hook you want');
  })
})

Then, you can use the plugin by passing it with provide, useState, or other methods to your page or component.