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.
javascript vue.js
asked Nov 13 at 16:43
flecki89
7618
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.
javascript vue.js
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 yourindex.htmlfile 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 thevue.config.jsfile'sconfigureWebpackhook. 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 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 at 18:32
You can just modify theindex.htmlfile directly for your meta tags.
– Ru Chern Chong
Nov 14 at 6:05
add a comment |
up vote
2
down vote
favorite
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.
javascript vue.js
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
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
7618
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 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 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 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 at 18:32
You can just modify theindex.htmlfile 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 yourindex.htmlfile 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 thevue.config.jsfile'sconfigureWebpackhook. 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 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 at 18:32
You can just modify theindex.htmlfile directly for your meta tags.
– Ru Chern Chong
Nov 14 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 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 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 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 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
"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
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
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.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 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 |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
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
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
1
down vote
accepted
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
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
answered Nov 14 at 10:31
flecki89
7618
answered Nov 14 at 10:31
flecki89
7618
answered Nov 14 at 10:31
flecki89
7618
7618
add a comment |
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.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 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.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 at 6:00
Simon Hyll
9481922
add a comment |
up vote
0
down vote
up vote
0
down vote
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 at 6:00
Simon Hyll
9481922
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 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
9481922
add a comment |
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
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
5,616132637
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.
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.
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 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 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.htmlstraight 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.htmlfile directly for your meta tags.– Ru Chern Chong
Nov 14 at 6:05