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

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


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.


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'    }  }}


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!