Set viewport meta-tag in vue.js application

thanksd brought me to the right answer. Since Vue CLI already has the html-webpack-plugin, I did it the official Vue CLI way (https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin).

1 - Added public/index.html

<!DOCTYPE html>
<html>
<head>
    <title><%= htmlWebpackPlugin.options.title %></title>
    <meta charset="utf-8"/>
</head>
<body>
<div id="app"></div>
</body>
</html>

2 - Set meta-tag in vue.config.js

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;
    })
}

You were on the right track with using vue-meta.

  1. Don't add them statically in your index.html file.
  2. Add them using vue-meta
  3. Set the vmid property to some unique identifier, that way vue-meta will replace the contents of the existing meta tag rather than creating a new one.

Tags:

Javascript

Vue.Js

Recent Posts