Vue 3: Port to @vueuse/head (and get rid of vue-meta) (#8221)

changelog/unreleased/change-update-vue

@@ -14,3 +14,4 @@ https://github.com/owncloud/web/pull/8202
 https://github.com/owncloud/web/pull/8198
 https://github.com/owncloud/web/pull/8213
 https://github.com/owncloud/web/pull/8214
+https://github.com/owncloud/web/pull/8221

packages/web-runtime/package.json

@@ -15,6 +15,7 @@
     "@uppy/tus": "^3.0.1",
     "@uppy/utils": "^5.0.2",
     "@uppy/xhr-upload": "^3.0.1",
+    "@vueuse/head": "1.0.22",
     "axios": "^0.27.2",
     "easygettext": "https://github.com/owncloud/easygettext/archive/refs/tags/v2.18.1-oc.tar.gz",
     "filesize": "^9.0.11",
@@ -42,7 +43,6 @@
     "vue-concurrency": "4.0.0",
     "vue-gettext": "2.1.12",
     "vue-inline-svg": "3.1.0",
-    "vue-meta": "^2.2.2",
     "vue-router": "3.6.5",
     "vue-select": "4.0.0-beta.6",
     "vuex": "4.1.0",

packages/web-runtime/src/App.vue

@@ -47,16 +47,21 @@ import SkipTo from './components/SkipTo.vue'
 import LayoutApplication from './layouts/Application.vue'
 import LayoutLoading from './layouts/Loading.vue'
 import LayoutPlain from './layouts/Plain.vue'
-import { getBackendVersion, getWebVersion } from './container/versions'
 import { defineComponent } from 'vue'
 import { isPublicLinkContext, isUserContext } from './router'
 import { additionalTranslations } from './helpers/additionalTranslations' // eslint-disable-line
 import { eventBus } from 'web-pkg/src/services'
+import { useHead } from './composables/head'
+import { useStore } from 'web-pkg/src/composables'
 
 export default defineComponent({
   components: {
     SkipTo
   },
+  setup() {
+    const store = useStore()
+    useHead({ store })
+  },
   data() {
     return {
       $_notificationsInterval: null,
@@ -89,9 +94,6 @@ export default defineComponent({
       }
       return LayoutApplication
     },
-    favicon() {
-      return this.configuration.currentTheme.logo.favicon
-    },
 
     selectedLanguage() {
       return (
@@ -168,21 +170,6 @@ export default defineComponent({
     }
   },
 
-  metaInfo() {
-    const metaInfo: any = {}
-    if (this.favicon) {
-      metaInfo.link = [{ rel: 'icon', href: this.favicon }]
-    }
-    const metaGenerator = {
-      name: 'generator',
-      content: [getWebVersion(), getBackendVersion({ store: this.$store })]
-        .filter(Boolean)
-        .join(', ')
-    }
-    metaInfo.meta = [metaGenerator]
-    return metaInfo
-  },
-
   methods: {
     ...mapActions(['fetchNotifications']),
 

packages/web-runtime/src/composables/head/index.ts

@@ -0,0 +1 @@
+export * from './useHead'

packages/web-runtime/src/composables/head/useHead.ts

@@ -0,0 +1,21 @@
+import { computed } from 'vue'
+import { Store } from 'vuex'
+import { useHead as _useHead } from '@vueuse/head'
+import { getBackendVersion, getWebVersion } from 'web-runtime/src/container/versions'
+
+export const useHead = ({ store }: { store: Store<any> }) => {
+  _useHead(
+    computed(() => {
+      const favicon = store.getters['configuration']?.currentTheme?.logo?.favicon
+      return {
+        meta: [
+          {
+            name: 'generator',
+            content: [getWebVersion(), getBackendVersion({ store })].filter(Boolean).join(', ')
+          }
+        ],
+        ...(favicon && { link: [{ rel: 'icon', href: favicon }] })
+      }
+    })
+  )
+}

packages/web-runtime/src/defaults/vue.js

@@ -3,16 +3,12 @@ import WebPlugin from '../plugins/web'
 import Avatar from '../components/Avatar.vue'
 import focusMixin from '../mixins/focusMixin'
 import lifecycleMixin from '../mixins/lifecycleMixin'
-import VueMeta from 'vue-meta'
 import VueRouter from 'vue-router'
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
 Vue.use(VueRouter)
 Vue.use(WebPlugin)
-Vue.use(VueMeta, {
-  refreshOnceOnNavigation: true
-})
 
 Vue.component('AvatarImage', Avatar)
 

packages/web-runtime/src/index.ts

@@ -9,6 +9,7 @@ import {
 
 import { router } from './router'
 import { configurationManager } from 'web-pkg/src/configuration'
+import { createHead } from '@vueuse/head'
 
 import {
   announceConfiguration,
@@ -82,6 +83,9 @@ export const renderSuccess = (): void => {
     wormhole: instance.config.globalProperties.$wormhole
   })
 
+  // @vueuse/head
+  instance.use(createHead())
+
   // mount App
   instance.mount('#owncloud')
   applications.forEach((application) => application.mounted(instance))
@@ -200,6 +204,8 @@ export const renderSuccess = (): void => {
 }
 
 export const renderFailure = async (err: Error): Promise<void> => {
+  Vue.prototype.$store = store
+
   announceVersions({ store })
   await announceTranslations({ vue: Vue, supportedLanguages, translations })
   await announceTheme({ store, vue: Vue, designSystem })

packages/web-runtime/src/pages/missingOrInvalidConfig.vue

@@ -21,9 +21,9 @@
 </template>
 
 <script lang="ts">
-import { getBackendVersion, getWebVersion } from '../container/versions'
 import { computed, defineComponent } from 'vue'
 import { useStore } from 'web-pkg'
+import { useHead } from '../composables/head'
 
 export default defineComponent({
   name: 'MissingConfigPage',
@@ -36,30 +36,13 @@ export default defineComponent({
     const footerSlogan = computed(() => {
       return store.getters.configuration?.currentTheme?.general?.slogan
     })
-    const favicon = computed(() => {
-      return store.getters.configuration?.currentTheme?.logo?.favicon
-    })
+
+    useHead({ store })
 
     return {
       logoImg,
-      footerSlogan,
-      favicon
-    }
-  },
-
-  metaInfo() {
-    const metaInfo: any = {}
-    if (this.favicon) {
-      metaInfo.link = [{ rel: 'icon', href: this.favicon }]
-    }
-    const metaGenerator = {
-      name: 'generator',
-      content: [getWebVersion(), getBackendVersion({ store: this.$store })]
-        .filter(Boolean)
-        .join(', ')
+      footerSlogan
     }
-    metaInfo.meta = [metaGenerator]
-    return metaInfo
   }
 })
 </script>