where to find or how to set htmlWebpackPlugin.options.title in project created with vue cli 3?

create a file vue.config.js at the root

module.exports = {
    chainWebpack: config => {
            .tap(args => {
                args[0].title = "My Vue App";
                return args;

see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin

Update the name property in your package.json file

  "name": "URL-friendly_app-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  "dependencies": {
  "devDependencies": {
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"

Update: The above mentioned method will only work if you use a URL friendly title.

There are a couple of other ways to do it

  • From the Vuejs official documentation Pages Configuration, you can use the html plugin configuration specify th title for different pages
  • Use the environement variables Modes and Environment Variables to hold your app/page title. I personally prefer and use this method.

.env (or any .env.[mode])

VUE_APP_NAME=Application flixible name

And this is how you call it in different places in your app

AnyComponent.vue (as a data properity)


appName: string = process.env.VUE_APP_NAME


appName: process.env.VUE_APP_NAME


<%= process.env.VUE_APP_NAME %>