error in loading the vue script for a drop-down list

Question

This is my first project in vue and it is being very difficult for me to find functional examples in vue. I'm trying to make a header component that shows a list of links, some of which I need to be a drop-down list of links. Here is my component

<template>
  <nav class='header'>
    <ul class='menu'>
      <li class='menu-item'>
        <a class='menu-link' href="https://www.esthima.fr/societe">QUI SOMMES-NOUS ?</a>
      </li>
      <li class="menu-item menu-item-dropdown" v-on:click="toggle('ranking')" v-bind:class="{'open' : dropDowns.ranking.open}">
        <a class='menu-link menu-link-toggle'>QUAND L’ANIMAL S’EN VA</a>
        <ul class='dropdown-menu'>
          <li class='dropdown-menu-item'>
            <a class='dropdown-menu-link'>TEST 1</a>
          </li>
          <li class='dropdown-menu-item'>
            <a class='dropdown-menu-link'>TEST 2</a>
          </li>
        </ul>
      </li>
      <li class='menu-item'>
        <a class='menu-link' href="https://boutique.esthima.fr">URNES ANIMAUX</a>
      </li>
    </ul>
    <img src="../assets/logoesthima.png">
    <a>NOS SERVICES</a>
    <a href="https://boutique.esthima.fr/">URNES ANIMAUX</a>
    <a>TARIFS ET DEVIS</a>
    <a>NOUS CONTACTER</a>


  </nav>
</template>

<script>
   export default{

  let header = new Vue({
      al: '.header',
  
  ready: function()
  {
    var self = this
    window.addEventListener('click', function(e){
      if (! e.target.parentNode.classList.contains('menu__link--toggle'))
      {
        self.close()
      }
    }, false)
  },
  
  data: {
    dropDowns: {
      ranking: { open: false}  
    }
  },
  
  methods: {
    toggle: function(dropdownName)
    {
      //alert(dropdownName)
       this.dropDowns[dropdownName].open = !this.dropDowns[dropdownName].open;
    },
    
    close: function()
    {
      for (dd in this.dropDowns)
      {
        this.dropDowns[dd].open = false;    
      }
    }
  }
  
})

   }
   


</script>

I'm following the few examples I've found and the documentation and they all return the same console loading error with the declaration inside the "new Vue" script whether I declare it directly or keep it as a constant. Someone who can make me see my mistake. Thank you very much in advance!

Answer 1

You should change the code to be a properly structured Single-File Component:

<template>
  <nav class='header'>
    <ul class='menu'>
      <li class='menu-item'>
        <a class='menu-link' href="https://www.esthima.fr/societe">
          QUI SOMMES-NOUS ?
        </a>
      </li>
      <li class="menu-item menu-item-dropdown" @click="toggle('ranking')" :class="{open: dropDowns.ranking.open}">
        <a class='menu-link menu-link-toggle'>
          QUAND L’ANIMAL S’EN VA
        </a>
        <ul class='dropdown-menu'>
          <li class='dropdown-menu-item'>
            <a class='dropdown-menu-link'>TEST 1</a>
          </li>
          <li class='dropdown-menu-item'>
            <a class='dropdown-menu-link'>TEST 2</a>
          </li>
        </ul>
      </li>
      <li class='menu-item'>
        <a class='menu-link' href="https://boutique.esthima.fr">URNES ANIMAUX</a>
      </li>
    </ul>
    <img src="../assets/logoesthima.png">
    <a>NOS SERVICES</a>
    <a href="https://boutique.esthima.fr/">URNES ANIMAUX</a>
    <a>TARIFS ET DEVIS</a>
    <a>NOUS CONTACTER</a>
  </nav>
</template>

<script>
export default
{
  mounted()
  {
    window.addEventListener('click', (evt) =>
    {
      if (! e.target.parentNode.classList.contains('menu__link--toggle'))
      {
        this.close()
      }
    }, false)
  },
  
  data() 
  {
    return {
      dropDowns: 
      {
        ranking: 
        { 
          open: false
        }  
      }
    };
  },
  
  methods: 
  {
    toggle(dropdownName)
    {
      //alert(dropdownName)
       this.dropDowns[dropdownName].open = !this.dropDowns[dropdownName].open;
    },
    
    close()
    {
      for (dd in this.dropDowns)
      {
        this.dropDowns[dd].open = false;    
      }
    }
  }
};
</script>