Vue Cli 3 Generated Project Set HTML Title

Question

Currently, after generating a project with Vue CLI 3 the title is "Vue App".

If I set the title in the created hook via document.title the browser will still will flash "Vue App" prior to displaying the title set via document.title.

Looking for a way to set the HTML title for a Vue CLI 3 generated project without it flashing the default "Vue App" title first.

Answer 1

You can set the title in /public/index.html statically.

Setting it to an empty string in index.html and keeping the update in the hook gets rid of the flashing.

Answer 2

also You can use custom index.html in another way, modify your vue.config.js:

module.exports = {
  publicPath: '/',
  chainWebpack: config => {
    config
      .plugin("html")
      .tap(args => {
        args[0].template = './public/index.html'
        return args
      })
  }
};

Answer 3

You can add postinstall to scripts section in your package.json with next command: "postinstall": "cp ./public/index.html ./node_modules/@vue/cli-service/lib/config/index-default.html"