Set viewport meta-tag in vue.js application
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 '18 at 16:43
flecki89flecki89
8918
add a comment |
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 '18 at 16:43
flecki89flecki89
8918
1
Could be wrong, but I believe Vue only adds these once on project creation. If you manually modify yourindex.htmlfile is it overwritten later in the development process?...
– War10ck
Nov 13 '18 at 16:45
1
vue cli uses webpack. So you might be able to specify a custom template by providing a HtmlWebpackPlugin in thevue.config.jsfile'sconfigureWebpackhook. See: github.com/jantimon/…
– thanksd
Nov 13 '18 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 '18 at 17:03
Confirming what @War10ck said, you can updateindex.htmlstraight in your editor. Vue won't modify this file, it's only created when you start a new project.
– Sheng Slogar
Nov 13 '18 at 18:32
You can just modify theindex.htmlfile directly for your meta tags.
– Ru Chern Chong
Nov 14 '18 at 6:05
add a comment |
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 '18 at 16:43
flecki89flecki89
8918
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
javascript vue.js
asked Nov 13 '18 at 16:43
flecki89flecki89
8918
asked Nov 13 '18 at 16:43
flecki89flecki89
8918
asked Nov 13 '18 at 16:43
flecki89flecki89
8918
asked Nov 13 '18 at 16:43
flecki89flecki89
8918
asked Nov 13 '18 at 16:43
flecki89flecki89
8918
8918
1
Could be wrong, but I believe Vue only adds these once on project creation. If you manually modify yourindex.htmlfile is it overwritten later in the development process?...
– War10ck
Nov 13 '18 at 16:45
1
vue cli uses webpack. So you might be able to specify a custom template by providing a HtmlWebpackPlugin in thevue.config.jsfile'sconfigureWebpackhook. See: github.com/jantimon/…
– thanksd
Nov 13 '18 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 '18 at 17:03
Confirming what @War10ck said, you can updateindex.htmlstraight in your editor. Vue won't modify this file, it's only created when you start a new project.
– Sheng Slogar
Nov 13 '18 at 18:32
You can just modify theindex.htmlfile directly for your meta tags.
– Ru Chern Chong
Nov 14 '18 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 yourindex.htmlfile is it overwritten later in the development process?...
– War10ck
Nov 13 '18 at 16:45
1
vue cli uses webpack. So you might be able to specify a custom template by providing a HtmlWebpackPlugin in thevue.config.jsfile'sconfigureWebpackhook. See: github.com/jantimon/…
– thanksd
Nov 13 '18 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 '18 at 17:03
Confirming what @War10ck said, you can updateindex.htmlstraight in your editor. Vue won't modify this file, it's only created when you start a new project.
– Sheng Slogar
Nov 13 '18 at 18:32
You can just modify theindex.htmlfile directly for your meta tags.
– Ru Chern Chong
Nov 14 '18 at 6:05
1
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 '18 at 16:45
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 '18 at 16:45
1
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 '18 at 16:53
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 '18 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 '18 at 17:03
"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 '18 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 '18 at 18:32
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 '18 at 18:32
You can just modify the
index.html file directly for your meta tags.– Ru Chern Chong
Nov 14 '18 at 6:05
You can just modify the
index.html file directly for your meta tags.– Ru Chern Chong
Nov 14 '18 at 6:05
add a comment |
3 Answers
3
active
oldest
votes
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 '18 at 10:31
flecki89flecki89
8918
add a comment |
You were on the right track with using vue-meta.
- Don't add them statically in your
index.htmlfile. - Add them using
vue-meta - Set the
vmidproperty to some unique identifier, that wayvue-metawill replace the contents of the existing meta tag rather than creating a new one.
answered Nov 14 '18 at 6:00
Simon HyllSimon Hyll
92011023
add a comment |
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 '18 at 6:12
Billal BegueradjBillal Begueradj
5,908132741
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',
autoActivateHeartbeat: false,
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 '18 at 10:31
flecki89flecki89
8918
add a comment |
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 '18 at 10:31
flecki89flecki89
8918
add a comment |
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 '18 at 10:31
flecki89flecki89
8918
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 '18 at 10:31
flecki89flecki89
8918
answered Nov 14 '18 at 10:31
flecki89flecki89
8918
answered Nov 14 '18 at 10:31
flecki89flecki89
8918
answered Nov 14 '18 at 10:31
flecki89flecki89
8918
8918
add a comment |
add a comment |
You were on the right track with using vue-meta.
- Don't add them statically in your
index.htmlfile. - Add them using
vue-meta - Set the
vmidproperty to some unique identifier, that wayvue-metawill replace the contents of the existing meta tag rather than creating a new one.
answered Nov 14 '18 at 6:00
Simon HyllSimon Hyll
92011023
add a comment |
You were on the right track with using vue-meta.
- Don't add them statically in your
index.htmlfile. - Add them using
vue-meta - Set the
vmidproperty to some unique identifier, that wayvue-metawill replace the contents of the existing meta tag rather than creating a new one.
answered Nov 14 '18 at 6:00
Simon HyllSimon Hyll
92011023
add a comment |
You were on the right track with using vue-meta.
- Don't add them statically in your
index.htmlfile. - Add them using
vue-meta - Set the
vmidproperty to some unique identifier, that wayvue-metawill replace the contents of the existing meta tag rather than creating a new one.
answered Nov 14 '18 at 6:00
Simon HyllSimon Hyll
92011023
You were on the right track with using vue-meta.
- Don't add them statically in your
index.htmlfile. - Add them using
vue-meta - Set the
vmidproperty to some unique identifier, that wayvue-metawill replace the contents of the existing meta tag rather than creating a new one.
answered Nov 14 '18 at 6:00
Simon HyllSimon Hyll
92011023
answered Nov 14 '18 at 6:00
Simon HyllSimon Hyll
92011023
answered Nov 14 '18 at 6:00
Simon HyllSimon Hyll
92011023
answered Nov 14 '18 at 6:00
Simon HyllSimon Hyll
92011023
92011023
add a comment |
add a comment |
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 '18 at 6:12
Billal BegueradjBillal Begueradj
5,908132741
add a comment |
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 '18 at 6:12
Billal BegueradjBillal Begueradj
5,908132741
add a comment |
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 '18 at 6:12
Billal BegueradjBillal Begueradj
5,908132741
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 '18 at 6:12
Billal BegueradjBillal Begueradj
5,908132741
answered Nov 14 '18 at 6:12
Billal BegueradjBillal Begueradj
5,908132741
answered Nov 14 '18 at 6:12
Billal BegueradjBillal Begueradj
5,908132741
answered Nov 14 '18 at 6:12
Billal BegueradjBillal Begueradj
5,908132741
5,908132741
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Could be wrong, but I believe Vue only adds these once on project creation. If you manually modify your
index.htmlfile is it overwritten later in the development process?...– War10ck
Nov 13 '18 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.jsfile'sconfigureWebpackhook. See: github.com/jantimon/…– thanksd
Nov 13 '18 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 '18 at 17:03
Confirming what @War10ck said, you can update
index.htmlstraight in your editor. Vue won't modify this file, it's only created when you start a new project.– Sheng Slogar
Nov 13 '18 at 18:32
You can just modify the
index.htmlfile directly for your meta tags.– Ru Chern Chong
Nov 14 '18 at 6:05