V-if hiding everything on page


There are no errors. And the VueJS Chrome plugin says there is no Vue detected.


Can you try this code.

// product.html
<!DOCTYPE html>
    <title>Product App</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <div class="nav-bar"></div>

    <div id="app">
      <div class="product">

        <div class="product-image">
          <img :src="image">

        <div class="product-info">
          <h1>{{ product }}</h1>
          <p v-if="inStock">In Stock</p>
          <p v-else>Out of stock</p>

   <script src="main.js"></script>

And in your main.js

var app = new Vue({
  el: '#app',
  data: {
     product: 'Socks',
     image: './assests/green.jpeg',
     inStock: true,


your code has some mistake in you data content,so inStock is not defined in you page,and v- if will make components show when inStock is true rather than it is undefined or ohther .