How to use `htmlWebpackPlugin.options.title` inside Vue SFC template?

Question

I want to use htmlWebpackPlugin.options.title in SFC template, is that doable?

Answer 1

Yes it's doable ...but other way around

1. You can use Environment Variables do define your app title
2. Then you can configure htmlWebpackPlugin to use this ENV variable as the value for title option
3. At the same same time, you can use use this variable in any client side JS (be it pure JS or SFC). Note that to use it inside the template, it's necessary to assign it to the data first...

.env file VUE_APP_TITLE=My App Title

vue.config.js

module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = process.ENV.VUE_APP_TITLE
        return args
      })
  }
}

SFC

data() {
  return {
    title: process.ENV.VUE_APP_TITLE
  }
}