Vue Cli 3 Generated Project Set HTML Title

Asked 25/10, 2018 at 11:6 Answered 16/4, 2020 at 4:50

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.

Carditis answered 25/10, 2018 at 11:6 Comment(0)

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.

Indaba answered 25/10, 2018 at 11:28 Comment(6)

Would much rather prefer to load dynamically – Carditis 25/10, 2018 at 15:34

Setting the title to empty in public/index.html did the trick. Thanks! – Carditis 26/10, 2018 at 11:50

@Carditis Well, you still set the title dynamically, but start with an empty default value for the title instead of a wrong one. – Indaba 8/8, 2019 at 0:38

In my newly created Vue CLI 4 app, there was no "/public/index.html" so I had to create one: <!DOCTYPE html><html lang="us"><head><title>My Title</title></head><body><div id="app"></div></body></html> – Eponymous 24/11, 2019 at 17:27

Just in case it helps anyone, I had deleted default index.html for some reason and needed the default content again. You can get it from \node_modules\@vue\cli-service\lib\config\index-default.html. It has got pretty much exactly what @Eponymous has shown in the comment above. – Palmira 12/3, 2020 at 18:19

My problem was that the index.html file was at the root of my project. Once I moved it into my public directory, the Vue CLI picked up my changes to the <title> – Destination 25/2, 2021 at 17:37

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
      })
  }
};

Baskett answered 16/4, 2020 at 4:50 Comment(1)

this should be the accepted answer because changing the title based on the project (settings) makes more sense than hard-coding it in the actual file – Mablemabry 28/8, 2020 at 12:28

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"

Baskett answered 9/4, 2020 at 2:35 Comment(0)

Recommended topics

Hot tags