use vue js variables in index.html

Question

I need to use vue js variables inside the index.html page.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 <link rel="shortcut icon" :href="$store.state.siteLogo" type="image/x-icon" />
 <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css" />
 <link rel="stylesheet" type="text/css" href="static/layui/common.css" />
 <title id="siteTitle">{{$store.state.siteTitle}}</title>
 </head>
 <body>
 <div id="app"></div>
 </body>
</html>

There, for the title, I need to get a value from the service. That value was able to get from a service and assigned it to a store js variable. My attempt is as in above and it's not working since it's an html file. Anyone, knows how can I achieve this? It worked like this. Inside App.vue created method if we set document.title as below.

created() {
 document.title = this.$store.state.siteTitle;
}

But now I need to know how can I change the shortcut icon as well from the service. Does anyone know?

this might answer you https://stackoverflow.com/questions/36612847/how-can-i-bind-the-html-title-content-in-vuejs — kusiaga, Nov 25 '20 at 08:18

score 0 · Accepted Answer · answered Nov 26 '20 at 02:08

Simply you can do this. You can change favicon dynamically from your service or your vuex state. But If you don't want to work with these vanilajs stuffs, so vue-meta.nuxtjs.org is for you.

created () {
    var link =
      document.querySelector("link[rel*='icon']") ||
      document.createElement("link");
    link.type = "image/x-icon";
    link.rel = "shortcut icon";
    link.href =
      "https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196";
    document.getElementsByTagName("head")[0].appendChild(link);
}

or you can put it into a method so it can be used dynamically on watch or during click event.

created() {
    this.initIcon();
  },
  methods: {
    initIcon() {
      var link =
        document.querySelector("link[rel*='icon']") ||
        document.createElement("link");
      link.type = "image/x-icon";
      link.rel = "shortcut icon";
      link.href = this.icon;
      document.getElementsByTagName("head")[0].appendChild(link);
    },
    click() {
      this.icon = '' // new updated icon here
      this.initIcon();
    },
  },

use vue js variables in index.html

1 Answers1