Vuetify: [Feature Request] Make vue-meta keyName used by Vuetify configurable for when initVueMeta is called

[shelakel]

Problem to solve

In the theme service, initVueMeta emits a new Vue instance containing a head property.
See: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/services/theme/index.ts#L181

vue-meta defaults the keyName to metaInfo.
See: https://vue-meta.nuxtjs.org/api/#keyname

When using a metaInfo property (the vue-meta default) to include meta info, during server side rendering the vuetify-theme-stylesheet style is not included in the output causing a flash of unstyled content (FOUC).

Once rendered client side, the style tag is inserted into the DOM but initially no theme styles are applied.

Note: Nuxt.js is currently using a keyName of head, not the vue-meta default metaInfo.

Proposed solution

Introduce a theme option to specify the vue-meta keyName to use and add a disclaimer concerning the FOUC to the migration guide from v1 to indicate that the keyName used for injecting the theme stylesheet was changed from metaInfo to head.

[ianfortier]

Should not be tagged as a bug?
This makes Vuetify unusable with Nuxt / Vue-meta

[KaelWD]

We did previously allow for either head or metaInfo. Vue-meta 2.0 now has a getOptions method we should be using instead: https://github.com/nuxt/vue-meta/issues/215

[kevinmarrec]

https://github.com/vuetifyjs/vuetify/pull/8566 should resolves everything

[kevinmarrec]

@ianfortier There are pending issues https://github.com/nuxt-community/vuetify-module/issues/103 https://github.com/nuxt-community/vuetify-module/issues/69 that are waiting for https://github.com/vuetifyjs/vuetify/pull/8566

Vuetify Theming is indeed for now buggy with Nuxt / Vue-meta for Single Page Applications (SPA)
It's working perfectly for SSR.

[kmrmshk]

Vuetify Theming is indeed for now buggy with Nuxt / Vue-meta for Single Page Applications (SPA)

In current v2.1.1, options of customProperties are not seem to work in except SSR mode.
I examined it happens since v2.0.12. Is it relating with this issues ?

thanks

[brooklynb7]

Vuetify Theming is indeed for now buggy with Nuxt / Vue-meta for Single Page Applications (SPA)

In current v2.1.1, options of customProperties are not seem to work in except SSR mode.
I examined it happens since v2.0.12. Is it relating with this issues ?

thanks

Nuxt version: 2.10.1
Vuetify version: 2.1.3

Encounter the same issue for the vuetify-theme-stylesheet missing in the head when using Nuxt.
Further more all the tags are also missing after use the vuetify as a plugin.

But when I rollback to vuetify 2.0.11, everything works fine.

[MrJmpl3]

Related: https://github.com/vuetifyjs/vuetify/issues/9334

The problem is not only for Nuxt, i have same problem with vue-cli and vue-cli-vuetify-plugin.

Edit: The problem in vue-cli and vue-cli-vuetify-plugin is when you import Vue-Meta but never use the metaInfo function.

[kmrmshk]

@MrJmpl3
You're absolutely right.
I've imported "vue-meta" temporarily, however didn't use it.
I solved this problems. Thanks so much.

[KaelWD]

This was resolved by #8566