How to integrate vue.config.js

Question

I created a Vue project using Vue CLI 3 using all the default preset options. When I run the app in Chrome using vue serve, I noticed that the elements inside the head element don't match the head elements inside /public/index.html at all. I read that I could add the meta elements I want inside vue.config.js, but when I go to run the app it doesn't seem to use that file. My vue.config.js looks like this:

module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = 'MyApp title';
                args[0].meta = {viewport: 'width=device-width,initial-scale=1,user-scalable=no'};

            return args;
        })
    }
}

And the HTMLWebpackPlugin portion of vue inspect looks like this:

/* config.plugin('html') */
new HtmlWebpackPlugin(
  {
    templateParameters: function () { /* omitted long function */ },
    template: '/*path-to-project-root*/node_modules/@vue/cli-service/lib/config/index-default.html'
  }
)
...

...which looks like it isn't even pointing to /public/index.html.

I don't really know where to look next, any help would be appreciated.

Answer 1

You can set meta data from within the page components

<script>
head () {
    return {
      title: 'my title,
      meta: [
          { hid: 'description', name: 'description', content: 'my description' }
      ]
    }
</script>