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.
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:
"app:mounted" is when all thing ready to send to browser.
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
Then, you can use the plugin by passing it with provide, useState, or other methods to your page or component.