Vue-meta: $meta().addApp not being applied untill mounted

[DRoet]

Hey @pimlie,

Just a quick followup question regarding the implementation of vue-meta + vuetify. I noticed the .addApp() method is not getting applied untill the application is fully mounted, which causes flickering in the theme when first loading the app, see: codepen. (the colors are black before they turn red)

Is there anything we can do to prevent this behaviour?

[KaelWD]

https://github.com/vuetifyjs/vuetify/commit/8928a5f04eb7f8f7a183bf9fb873d1f3e3f3a1c6

[DRoet]

^^ those lines were added because otherwise the theme would trigger too early and wouldn't get applied because of: https://github.com/nuxt/vue-meta/blob/master/src/shared/additional-app.js#L17

[pimlie]

Its by design that vue-meta only renders meta-info once on page load. The 'best' time to do that is when all child components have been mounted, that way its unlikely that their metadata is changed again and we are updating meta data rapidly in succession.

You should be able though to call vm.$meta().refresh() at any time. There is a slight chance that an early refresh call will interfere for SSR sites as we do some extra initialization for those. But after looking at the mixin I dont think it should. To be sure please test that callbacks are still called when you do an early refresh for a SSR page.

[DRoet]

Hmm when I try to call refresh() right after set() it throws a warning because of https://github.com/nuxt/vue-meta/blob/master/src/client/refresh.js#L24.

however if I provide an overwrite: $root._vueMeta = true it does work correctly

[pimlie]

Hmm, thats really not advised to do that. Firstly because $root_vueMeta should be an object, but _vueMeta is an internal var of us and I want to be able to change that when needed.

It seems you are just calling refresh too early, I guess you also call it directly in a beforeCreate hook? Can you delay that to a created hook? Cause then the root should be initialized by vue-meta

[DRoet]

Ah I thought our theme was using the created hook, but it is indeed the beforeCreate hook.

I will avoid modifying _vueMeta, I just thought it was interesting that the stylesheet would still get created correctly even when forcing it.

[stale[bot]]

Thanks for your contribution to vue-meta! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of vue-meta
2. Comment the steps to reproduce it
   Issues that are labeled as pending will not be automatically marked as stale.

[amritk]

I don't believe this issue should be closed just yet

[amritk]

Alright for anyone landing here, found a new workaround

https://github.com/vuetifyjs/vuetify/issues/9453#issuecomment-604217303