Passing boolean Vue prop value in HTML : <p>I am fairly new to Vue and have started with a project with <a href="https://github.com/vuejs/vue-cli" rel="noreferrer">vue-cli</a>.</p>

<p>I am looking into conditional rendering based on a prop sent from parent.</p>

<p><strong>Home.vue</strong> <em>(parent)</em></p>

<pre><code>&lt;template&gt;
    &lt;Header have-banner="true" page-title="Home"&gt;

    &lt;/Header&gt;
&lt;/template&gt;

&lt;script&gt;
    import Header from "./Header";

    export default {
        components: {
            Header,
        },
        name: "Home",
        data() {
            return {
                header: "Hello Vue!",
            };
        },
    };
&lt;/script&gt;
</code></pre>

<p><strong>Header.vue</strong> <em>(child)</em></p>

<pre><code>&lt;template&gt;
    &lt;header&gt;
        &lt;div v-if="haveBanner == 'true'"&gt;
            ...
        &lt;/div&gt;
            ...
    &lt;/header&gt;
&lt;/template&gt;
</code></pre>

<p>I have looked at another <a href="https://vue-school.com/conditional-rendering#v-if-and-v-else" rel="noreferrer">conventional</a> way to achieve this but vue-cli renders templates differently.</p>

<p>As passing the prop in the HTML markup, the prop <code>haveBanner</code> evaluates as a string and, therefore, even if I did:</p>

<p><em>Parent</em></p>

<pre><code>&lt;Header have-banner="false"&gt;&lt;/Header&gt;
</code></pre>

<p><em>Child</em></p>

<pre><code>&lt;div v-if="haveBanner"`&gt;
    ...
&lt;/div&gt;
</code></pre>

<p>That <code>&lt;div&gt;</code> would still display and, because of this, I am having to do an explicit check to see if it evaluates to <code>'true'</code>. I am not a fan of this due to possible issues with type coercion and I am thrown a warning with a type check (<code>===</code>) saying:</p>

<blockquote>
  <p>Binary operation argument type string is not compatible with type string</p>
</blockquote>

<p>Is there a way to for either the child to evaluate this prop as a boolean or for the parent to pass it as a boolean in the markup?</p>
