Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 596
Kristof Komlossy Avatar asked Mar 01 '19 19:03

Kristof Komlossy


People also ask

How do I change my vue title?

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

Does vue CLI use Babel?

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.

How do I start vue CLI ui?

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 .

Which vue command inspect and modify the config?

You can also use the vue config command to inspect or modify the global CLI config.


1 Answers

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.

like image 109
Chris Avatar answered Sep 21 '22 01:09

Chris