Vue-Cli: 'title' option for htmlWebpackPlugin does not work

G

6

35

I'm using vue-cli (3.4.1) and I'm trying to simply change the title of the document.

I added the following to the vue.config.js

    chainWebpack: (config) => {
        config
          .plugin('html')
          .tap((args) => {
            args[0].title = 'Custom Title';
            return args;
          });
      },

and inspected the webpack config with vue inspect --plugin html resulting in the following output

    /* config.plugin('html') */
    new HtmlWebpackPlugin(
      {
        templateParameters: function () { /* omitted long function */ },
        template: '<path>\node_modules\\@vue\\cli-service\\lib\\config\\index-default.html',
        title: 'Custom Title'
      }
    )

The title of the Webapp still says "Vue App".

Any ideas why?

PS: I do not want to set document.title = 'Custom Title' somewhere in my app. I want the title between the <title>-tags in the <head> element of the document to be altered at build time.

Gerbil answered 1/3, 2019 at 19:24 Comment(1)

That could be a bug. I recommend reporting it. – Dov 3/3, 2019 at 5:21

G

3

I submitted a bug report as recommended by @tony19.

tldnr: Edit the title in the template at public/index.html which will be used at build time.

Long version: I did not have the public/index.html anymore in my project, apparently I deleted it some time ago and therefore never used the template functionality. The cli still used a template located somewhere and therefore all changes for the htmlWebpackPlugin do nothing.

So either you disable the index.html-template and modify the htmlWebpackPlugin or you edit the template to make your changes.

Gerbil answered 6/3, 2019 at 8:32 Comment(0)

T

59

Unfortunately the above answers didn't help me. As stated in the offical documentation you only need to add the vue.config.js to your root folder and add the following:

    // vue.config.js
    module.exports = {
      chainWebpack: config => {
        config
        .plugin('html')
        .tap(args => {
          args[0].title = 'Your new title'
          return args
        })
      }
    }

Keep in mind that you have to stop the App and start again with npm run serve. This worked for me.

Tobit answered 25/2, 2020 at 20:45 Comment(0)

E

34

According to the configuration reference of the Vue CLI, you could set the title by overriding the pages section in vue.config.js. Since all config options are optional except for entry, this should do it:

module.exports = {
  pages: {
    index: {
      entry: 'src/index/main.js',
      title: 'Custom Title'
    }
  }
}

Epistemology answered 8/4, 2020 at 19:58 Comment(3)

This one worked perfectly for me! I only needed to modify the entry path to how my entry file is setup. – Medicate 22/4, 2020 at 2:47

This worked fine also for me. I simply had to restart my docker container. – Reasonless 8/2, 2021 at 9:22

This is the simplest way to achieve the desired result – Unreconstructed 29/6, 2021 at 13:3

G

16

To set the title of a vue-cli application you can set the title in HtmlWebpackPlugin (just as you have)

/* vue.config.js */
chainWebpack: (config) => {
    config
      .plugin('html')
      .tap((args) => {
        args[0].title = 'Custom Title';
        return args;
      });
  },

then you must edit the <title> of public/index.html to reference the title using lodash syntax.

<!-- public/index.html -->
<head>
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

Check out Html Webpack Plugin's documentation on writing your own templates!

Hope this helps!

Groundnut answered 22/10, 2019 at 16:47 Comment(0)

M

4

I could not make changing the title from the webpack-config work, i'm assuming vue-cli overrides the one from the config later. What worked for me is setting VUE_APP_TITLE=<custom title> in .env and using <title><%= process.env.VUE_APP_TITLE %></title> in index.html. Source

Marcelina answered 9/4, 2020 at 17:45 Comment(1)

Also process.env.VUE_APP_TITLE = 'ABC' in vue.config.js – Independent 22/5 at 10:38

G

3

I submitted a bug report as recommended by @tony19.

tldnr: Edit the title in the template at public/index.html which will be used at build time.

Long version: I did not have the public/index.html anymore in my project, apparently I deleted it some time ago and therefore never used the template functionality. The cli still used a template located somewhere and therefore all changes for the htmlWebpackPlugin do nothing.

So either you disable the index.html-template and modify the htmlWebpackPlugin or you edit the template to make your changes.

Gerbil answered 6/3, 2019 at 8:32 Comment(0)

B

0

You can set the title used by the HtmlWebpackPlugin by setting the "name" property in package.json in the root of your vue-cli app. No need for chainWebpack just to change the title.

Buckley answered 12/2, 2020 at 15:38 Comment(1)

This does work, but the package.json name is restricted to lower-case_hypens-and-underscores only. – Scopophilia 13/4, 2020 at 12:48

Recommended topics

Hot tags