Metadata partially set up.

Author: oksbwn

package-lock.json

@@ -11,6 +11,7 @@
     "core-js": "^3.6.5",
     "firebase": "^9.0.0",
     "vue": "^2.6.11",
+    "vue-meta": "^2.4.0",
     "vue-router": "^3.5.2",
     "vuetify": "^2.4.0",
     "vuex": "^3.6.2"

package.json

@@ -5,7 +5,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>

public/favicon.ico

@@ -11,18 +11,24 @@ import Container from "./views/Container.vue";
 
 export default {
   name: "App",
-
   components: {
     Container,
   },
-
-  data: () => ({
-    //
-  }),
   mounted() {
     this.$store.dispatch("setUserMetaData");
     this.$store.dispatch("setSkills");
   },
+  metaInfo() {
+    return {
+      title: this.title,
+    };
+  },
+  computed: {
+    title: function () {
+      let name = this.$store.getters.getUserMetaData.name;
+      return name ? `${name} | Resume` : "A dummy title.";
+    },
+  },
 };
 </script>
 <style>

public/index.html

@@ -3,7 +3,9 @@ import App from './App.vue'
 import vuetify from './plugins/vuetify'
 import store from "./store";
 import router from './routes.js'
+import VueMeta from 'vue-meta'
 
+Vue.use(VueMeta)
 Vue.config.productionTip = false
 
 new Vue({