Vue-Cli: 'title' option for htmlWebpackPlugin does not work
Solution 1
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.
Solution 2
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.
Solution 3
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'
}
}
}
Solution 4
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!
Solution 5
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
Kristof Komlossy
Updated on April 10, 2021Comments
-
Kristof Komlossy about 3 years
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.