Chore: npm dependency upgrade; vue-meta > @unhead/vue

assets/js/app.js

@@ -1,7 +1,7 @@
 import "bootstrap/dist/css/bootstrap.min.css";
 import "../css/app.css";
 import { createApp, h } from "vue";
-import { createMetaManager, plugin as metaPlugin } from "vue-meta";
+import { VueHeadMixin, createHead } from "@unhead/vue"; // not deprecated. see https://github.com/unjs/unhead/issues/291
 import App from "./views/App.vue";
 import setupRouter from "./router";
 import setupI18n from "./i18n";
@@ -60,11 +60,13 @@ const app = createApp({
 });
 
 const i18n = setupI18n();
+const head = createHead();
+
 app.use(i18n);
 app.use(setupRouter(i18n));
-app.use(createMetaManager());
-app.use(metaPlugin);
 app.use(featureflags);
+app.use(head);
+app.mixin(VueHeadMixin); // not deprecated. see https://github.com/unjs/unhead/issues/291
 window.app = app.mount("#app");
 
 watchThemeChanges();

assets/js/components/Savings.vue

@@ -95,9 +95,9 @@
 														(referenceGrid - avgPrice) * totalCharged,
 														currency,
 														false
-												  )} ${fmtCurrencySymbol(currency)} ${$t(
+													)} ${fmtCurrencySymbol(currency)} ${$t(
 														'footer.savings.moneySaved'
-												  )}`
+													)}`
 												: ''
 										"
 									/>
@@ -116,7 +116,7 @@
 															1000,
 														0,
 														'kilogram'
-												  )} ${$t('footer.savings.co2Saved')}`
+													)} ${$t('footer.savings.co2Saved')}`
 												: ''
 										"
 									/>

assets/js/components/VehicleStatus.vue

@@ -83,11 +83,11 @@ export default {
 					? t("cleanEnergyCharging", {
 							co2: this.fmtCo2Short(this.tariffCo2),
 							limit: this.fmtCo2Short(this.smartCostLimit),
-					  })
+						})
 					: t("cheapEnergyCharging", {
 							price: this.fmtPricePerKWh(this.tariffGrid, this.currency, true),
 							limit: this.fmtPricePerKWh(this.smartCostLimit, this.currency, true),
-					  });
+						});
 			}
 
 			if (this.pvTimerActive && !this.enabled && this.pvAction === "enable") {

assets/js/views/App.vue

@@ -1,8 +1,5 @@
 <template>
 	<div class="app">
-		<metainfo>
-			<template #title="{ content }">{{ content ? `${content} | evcc` : `evcc` }}</template>
-		</metainfo>
 		<router-view :notifications="notifications" :offline="offline"></router-view>
 	</div>
 </template>
@@ -19,6 +16,10 @@ export default {
 	data: () => {
 		return { reconnectTimeout: null, ws: null };
 	},
+	head() {
+		const siteTitle = store.state.siteTitle;
+		return { title: siteTitle ? `${siteTitle} | evcc` : "evcc" };
+	},
 	mounted: function () {
 		this.connect();
 		document.addEventListener("visibilitychange", this.pageVisibilityChanged, false);
@@ -109,9 +110,6 @@ export default {
 			window.location.reload();
 		},
 	},
-	metaInfo() {
-		return { title: store.state.siteTitle || "" };
-	},
 };
 </script>
 <style scoped>

assets/js/views/ChargingSessions.vue

@@ -291,6 +291,9 @@ export default {
 			selectedColumns: settings.sessionColumns,
 		};
 	},
+	head() {
+		return { title: `${this.$t("sessions.title")} | evcc` };
+	},
 	computed: {
 		currentSessions() {
 			const sessionsWithDefaults = this.sessions.map((session) => {