Set viewport meta-tag in vue.js application

user_1238130 0
Viewed 18600

For developing and building my project, I use Vue CLI 3.

When building my project, it adds these meta-tags to index.html by default.

<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">

However, for mobile I want to add user-scalable=no to the viewport-tag.

How can I override these meta-Tags?

With vue-head and vue-meta, I had no luck. These plugins only add meta-tags instead of overrideing them.

vue.js javascript
4 Answers

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

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.
user_56146020

When building my project, it adds these meta-tags to index.html by default.

Yes, but you can modify index.html at your will after that.

How can I override these meta-Tags?

You can either hard code them directly in the classic way in index.html or use the plugins you mentioned.

With vue-head and vue-meta, I had no luck. These plugins only add meta-tags instead of overrideing them.

That is not a plugin's problem: HTML does not provide a way to override meta tags. It is up to you to set the right meta tags.

user_33296640

If, like me, you are interested in dynamic Open Graph protocol meta tags, you'll need to use the more verbose syntax to make sure you add Meta tags with property (instead of name) and content tags.

I know the original question doesn't specifically ask for these types of tags, but I'm going to share this to hopefully help anyone else who looking and couldn't find an answer to cover a broader type of meta tags.

Here's an example, where you pass in an array of objects, instead of a single object:

config.plugin('html').tap(args => {
    args[0].meta = [
        {
            property: 'og:image',
            content: `${environment_url}/images/logos/my_logo.png`,
        },
        {
            property: 'og:image:width',
            content: '1200',
        },
        {
            property: 'og:image:height',
            content: '1200',
        },
    ];
    return args;
});

You can define multiple meta tags in a single object (when you use the non-Array approach), but you'll lose control of the "property" tag name.

I was able to find this syntax within the examples show on this page: https://github.com/jaketrent/html-webpack-template

user_40359520
Related