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.

wwerner · Accepted Answer · 2019-03-26T09:14:13.850

19

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.

edited Mar 26 '19 at 09:14

answered Oct 25 '18 at 11:28

wwerner

4,227
1
21
39

6

Would much rather prefer to load dynamically – xspydr Oct 25 '18 at 15:34
Setting the title to empty in public/index.html did the trick. Thanks! – xspydr Oct 26 '18 at 11:50
@xspydr Well, you still set the title dynamically, but start with an empty default value for the title instead of a wrong one. – wwerner Aug 08 '19 at 00:38
2

In my newly created Vue CLI 4 app, there was no "/public/index.html" so I had to create one: ` My Title
` – zett42 Nov 24 '19 at 17:27
2

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 @zett42 has shown in the comment above. – dotNET Mar 12 '20 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 `` – Fearnbuster Feb 25 '21 at 17:37

Pashaman · Answer 2 · 2020-04-16T06:02:09.903

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

edited Apr 16 '20 at 06:02

answered Apr 16 '20 at 04:50

Pashaman

21
2

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 – Lucas Venturini Aug 28 '20 at 12:28

score 0 · Answer 3 · edited Apr 09 '20 at 08:53

0

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"

edited Apr 09 '20 at 08:53

Adrian Mole

49,934
160
51
83

answered Apr 09 '20 at 02:35

Pashaman

21
2

Vue Cli 3 Generated Project Set HTML Title

3 Answers3