Slugy, webp, hromada refaktoringu

src/layouts/ProfileLayout.vue

@@ -35,7 +35,7 @@
 
     <q-page-container>
       <BreadcrumbsNavigation :items="breadcrumbs || []"/>
-      <div class="q-mx-md q-my-md" style="margin-bottom: 150px">
+      <div class="q-mx-md q-my-md" style="padding-bottom: 150px">
         <router-view/>
       </div>
     </q-page-container>
@@ -56,7 +56,7 @@ export default {
 </script>
 
 <script setup>
-import {ref} from 'vue'
+import {ref, watch} from 'vue'
 import {storeToRefs} from "pinia";
 import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
 import {useAppStore} from "stores/App";
@@ -71,9 +71,12 @@ const $q = useQuasar();
 const $router = useRouter();
 
 const {pageTitle, breadcrumbs} = storeToRefs(useAppStore());
-useMeta(() => metaData({
-  title: pageTitle.value
-}));
+watch(() => pageTitle.value, () => {
+  useMeta(() => metaData({
+    title: pageTitle.value
+  }));
+
+})
 
 const leftDrawerOpen = ref(false)
 const toggleLeftDrawer = () => {