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.
This can be simply done by changing the content of the <title> tag in our html code. But for Single-Page Applications, things are a little bit different. When the router changes to a different page component, the title should be changed programmatically using document. title = 'new title' .
A default Vue CLI project uses @vue/babel-preset-app, which uses @babel/preset-env and the browserslist config to determine the Polyfills needed for your project.
Getting Started. We need to install the Vue CLI to be able to use it. To install it, open the command line and run npm install -g @vue/cli if you're using npm, or run yarn global add @vue/cli if you're using yarn. You can verify that it is properly installed by simply running vue .
You can also use the vue config command to inspect or modify the global CLI config.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With