[Vuejs]-Nuxt render header.vue with store data

The fact that you have some loading content cannot really be shortened by magic. You could block the rendering of the page with asyncData, that way your app will wait for the HTTP calls to be finished before rendering the page (works only on pages btw).

Also, if you wrap your code inside of the <client-only> tag (not <no-ssr> because this one is deprecated), what you’re asking here is pretty much: "please do not render this part on the server but let my client do the work". Which is mainly the opposite of what you’re trying to achieve here.

You could also try to server-render the content being loaded if it’s possible, that way it will be visually available even if not hydrated yet.