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 %>