Menu
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.
834
Throw the viewport meta tag into your <head> , plus the @viewport rule into your CSS when you're building flexible layouts and you're good to go.
Using vue-meta First, to use vue-meta , open your terminal and navigate to your existing Vue project directory. Then, run the following command: npm install vue-meta @2.4. 0.
The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.
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;
})
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With