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

//vue.config.js
module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .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)

TypeScript

appName: string = process.env.VUE_APP_NAME

Javascript

appName: process.env.VUE_APP_NAME

anyHTML.html

<%= process.env.VUE_APP_NAME %>