Menu
I have made a simple Vue app using the Vue CLI and now I want to add Google Tag Manager code in the head of the html conditionally only for the production build. I could do this with a server side language like php so I tried changing the index.html to index.php but when I build the project it outputs an index.html with the app injected and the index.php without the app injected in the dist folder. The php code also doesn't work with the webpack-dev-server in the vue cli.
How can I integrate some server side code (it doesn't have to be php) into the index of the vue app generated by the vue cli to conditionally add the tag manager code for the production build? I'm not sure how the vue cli build process is done. Can I tell it to use a different index.html for the production build?
Extra: I'm interested in knowing more about the vue cli build process. ex. There is no script tag in the template index.html so how does Vue inject itself into the index when building or using the webpack-dev-server?
366
The v-if directive in Vue-js computes a condition to be true into the DOM. When the condition shows false it completely removes the element from the DOM. The if-condition is used in cases where the form element needs to show an error when the user has no input in the input field.
To conditionally render something in Vue, you should use v-if and v-else directives. Simply pass an expression to the v-if directive, and the block will render if the expression is true. You can also use v-else , which will render if the preceeding v-if expression evaluates to a falsy value.
It's not recommended to use v-if and v-for on the same element due to implicit precedence. Refer to style guide for details.
The key difference is that v-if conditionally renders elements and v-show conditionally displayselements. This means that v-if will actually destroy and recreate elements when the conditional is toggled. Meanwhile, v-show will always keep the element in the DOM and will only toggle its display by changing its CSS.
I just saw in the vue cli documentation that the index.html page is processed by webpack. This means I can use lodash template syntax to easily add tags in the head only on production
<head>
...
<%= process.env.NODE_ENV === 'production' ? '<script>...</script>' : '' %>
...
</head>
alternative method:
<% if(process.env.NODE_ENV === 'production') { %>
<script>...</script>
<% } %>
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
