title: How to add vanilla JavaScript to vue.js project?
body: <p>Good Day, I'm very new to vue.js and want a navbar, which ist transparent by default, but changes its background on scrolling. Unfortunately, it does not work. I tried a fe solutions, but none of this worked. So this JavaScript code is an example from Stack Overflow, which works in a Fiddle. If you need more information and/or code, please let me know.</p>
  
  <h3>Navigation.vue</h3>
  
  <pre><code>&lt;template&gt;
      &lt;div id="navigation"&gt; 
          &lt;nav class="nav-items"&gt; 
              &lt;router-link class="item" to="/home"&gt;Home&lt;/router-link&gt;
              &lt;router-link class="item" to="/about"&gt;About&lt;/router-link&gt;
              &lt;router-link class="item" to="/japan"&gt;Japan&lt;/router-link&gt;
          &lt;/nav&gt; 
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: 'navigation'
  }
  
  import scroll from '../assets/js/scroll.js';
  
  &lt;/script&gt;
  </code></pre>
  
  <h3>scroll.js</h3>
  
  <pre><code>const navbar = document.querySelector('#navigation')
  
  window.addEventListener('scroll', function(e) {
    const lastPosition = window.scrollY
    if (lastPosition &gt; 50 ) {
      navbar.classList.add('colored')
    } else if (navbar.classList.contains('colored')) {
      navbar.classList.remove('colored')
    } else {
      navbar.classList.remove('colored')
    }
  })
  </code></pre>
  
  <h3>navigation.scss</h3>
  
  <p>FYI: I've removed uneccessary code here.</p>
  
  <pre><code>#navigation {
      background: transparent;
  
      .colored {
          background: #fff;
          transition: 0.3s;
      }
  
  }
  </code></pre>