Set viewport meta-tag in vue.js application

up vote
2
down vote

favorite

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.

asked Nov 13 at 16:43

flecki89

7618

1

Could be wrong, but I believe Vue only adds these once on project creation. If you manually modify your index.html file is it overwritten later in the development process?...
– War10ck
Nov 13 at 16:45

1

vue cli uses webpack. So you might be able to specify a custom template by providing a HtmlWebpackPlugin in the vue.config.js file's configureWebpack hook. See: github.com/jantimon/…
– thanksd
Nov 13 at 16:53

"However, for mobile I want to add user-scalable=no to the viewport-tag." — That is almost always a terrible idea with accessibility implications.
– Quentin
Nov 13 at 17:03

Confirming what @War10ck said, you can update index.html straight in your editor. Vue won't modify this file, it's only created when you start a new project.
– Sheng Slogar
Nov 13 at 18:32

You can just modify the index.html file directly for your meta tags.
– Ru Chern Chong
Nov 14 at 6:05

add a comment |

up vote
2
down vote

favorite

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.

asked Nov 13 at 16:43

flecki89

7618

1

Could be wrong, but I believe Vue only adds these once on project creation. If you manually modify your index.html file is it overwritten later in the development process?...
– War10ck
Nov 13 at 16:45

1

vue cli uses webpack. So you might be able to specify a custom template by providing a HtmlWebpackPlugin in the vue.config.js file's configureWebpack hook. See: github.com/jantimon/…
– thanksd
Nov 13 at 16:53

"However, for mobile I want to add user-scalable=no to the viewport-tag." — That is almost always a terrible idea with accessibility implications.
– Quentin
Nov 13 at 17:03

Confirming what @War10ck said, you can update index.html straight in your editor. Vue won't modify this file, it's only created when you start a new project.
– Sheng Slogar
Nov 13 at 18:32

You can just modify the index.html file directly for your meta tags.
– Ru Chern Chong
Nov 14 at 6:05

add a comment |

up vote
2
down vote

favorite

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.

asked Nov 13 at 16:43

flecki89

7618

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.

javascript vue.js

asked Nov 13 at 16:43

flecki89

7618

asked Nov 13 at 16:43

flecki89

7618

asked Nov 13 at 16:43

flecki89

7618

asked Nov 13 at 16:43

flecki89

7618

asked Nov 13 at 16:43

flecki89

7618

1

Could be wrong, but I believe Vue only adds these once on project creation. If you manually modify your index.html file is it overwritten later in the development process?...
– War10ck
Nov 13 at 16:45

1

vue cli uses webpack. So you might be able to specify a custom template by providing a HtmlWebpackPlugin in the vue.config.js file's configureWebpack hook. See: github.com/jantimon/…
– thanksd
Nov 13 at 16:53

"However, for mobile I want to add user-scalable=no to the viewport-tag." — That is almost always a terrible idea with accessibility implications.
– Quentin
Nov 13 at 17:03

Confirming what @War10ck said, you can update index.html straight in your editor. Vue won't modify this file, it's only created when you start a new project.
– Sheng Slogar
Nov 13 at 18:32

You can just modify the index.html file directly for your meta tags.
– Ru Chern Chong
Nov 14 at 6:05

add a comment |

1

Could be wrong, but I believe Vue only adds these once on project creation. If you manually modify your index.html file is it overwritten later in the development process?...
– War10ck
Nov 13 at 16:45

1

vue cli uses webpack. So you might be able to specify a custom template by providing a HtmlWebpackPlugin in the vue.config.js file's configureWebpack hook. See: github.com/jantimon/…
– thanksd
Nov 13 at 16:53

"However, for mobile I want to add user-scalable=no to the viewport-tag." — That is almost always a terrible idea with accessibility implications.
– Quentin
Nov 13 at 17:03

Confirming what @War10ck said, you can update index.html straight in your editor. Vue won't modify this file, it's only created when you start a new project.
– Sheng Slogar
Nov 13 at 18:32

You can just modify the index.html file directly for your meta tags.
– Ru Chern Chong
Nov 14 at 6:05

Could be wrong, but I believe Vue only adds these once on project creation. If you manually modify your index.html file is it overwritten later in the development process?...
– War10ck
Nov 13 at 16:45

vue cli uses webpack. So you might be able to specify a custom template by providing a HtmlWebpackPlugin in the vue.config.js file's configureWebpack hook. See: github.com/jantimon/…
– thanksd
Nov 13 at 16:53

"However, for mobile I want to add user-scalable=no to the viewport-tag." — That is almost always a terrible idea with accessibility implications.
– Quentin
Nov 13 at 17:03

Confirming what @War10ck said, you can update index.html straight in your editor. Vue won't modify this file, it's only created when you start a new project.
– Sheng Slogar
Nov 13 at 18:32

You can just modify the index.html file directly for your meta tags.
– Ru Chern Chong
Nov 14 at 6:05

add a comment |

3 Answers
3

active

oldest

votes

up vote
1
down vote

accepted

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;

    })

}

answered Nov 14 at 10:31

flecki89

7618

add a comment |

up vote
0
down vote

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

Don't add them statically in your index.html file.

Add them using vue-meta

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.

answered Nov 14 at 6:00

Simon Hyll

9481922

add a comment |

up vote
0
down vote

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.

answered Nov 14 at 6:12

Billal Begueradj

5,616132637

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53285704%2fset-viewport-meta-tag-in-vue-js-application%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
1
down vote

accepted

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;

    })

}

answered Nov 14 at 10:31

flecki89

7618

add a comment |

up vote
1
down vote

accepted

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;

    })

}

answered Nov 14 at 10:31

flecki89

7618

add a comment |

up vote
1
down vote

accepted

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;

    })

}

answered Nov 14 at 10:31

flecki89

7618

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;

    })

}

answered Nov 14 at 10:31

flecki89

7618

answered Nov 14 at 10:31

flecki89

7618

answered Nov 14 at 10:31

flecki89

7618

answered Nov 14 at 10:31

flecki89

7618

add a comment |

up vote
0
down vote

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

Don't add them statically in your index.html file.

Add them using vue-meta

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.

answered Nov 14 at 6:00

Simon Hyll

9481922

add a comment |

up vote
0
down vote

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

Don't add them statically in your index.html file.

Add them using vue-meta

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.

answered Nov 14 at 6:00

Simon Hyll

9481922

add a comment |

up vote
0
down vote

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

Don't add them statically in your index.html file.

Add them using vue-meta

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.

answered Nov 14 at 6:00

Simon Hyll

9481922

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

Don't add them statically in your index.html file.

Add them using vue-meta

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.

answered Nov 14 at 6:00

Simon Hyll

9481922

answered Nov 14 at 6:00

Simon Hyll

9481922

answered Nov 14 at 6:00

Simon Hyll

9481922

answered Nov 14 at 6:00

Simon Hyll

9481922

add a comment |

up vote
0
down vote

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.

answered Nov 14 at 6:12

Billal Begueradj

5,616132637

add a comment |

up vote
0
down vote

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.

answered Nov 14 at 6:12

Billal Begueradj

5,616132637

add a comment |

up vote
0
down vote

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.

answered Nov 14 at 6:12

Billal Begueradj

5,616132637

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.

answered Nov 14 at 6:12

Billal Begueradj

5,616132637

answered Nov 14 at 6:12

Billal Begueradj

5,616132637

answered Nov 14 at 6:12

Billal Begueradj

5,616132637

answered Nov 14 at 6:12

Billal Begueradj

5,616132637

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky