Vue

Библиотеки

Hamburger menu / Гамбургер меню

• Vue Tasty Burgers — на основе библиотеки AMBURGERS https://jonsuh.com/hamburgers/
  • https://github.com/imfaber/vue-tasty-burgers
  • https://imfaber.github.io/vue-tasty-burgers/dist/#/index

VueScreen / Vue-Screen

• GitHub
• Documentation

vue-gtm

Работа с GTM — Google Tag Manager.

• Для Vue 2: https://www.npmjs.com/package/@gtm-support/vue2-gtm
• How to track custom GTM events in Vue.js application? | by Krzysztof Kaszanek | Medium

См. также:

• How to Track AJAX forms with Google Tag Manager - YouTube
• Form tracking with Google Tag Manager — Complete Guide

Сниппеты

Hamburger / Burger Menu

• Рабочая версия: https://codepen.io/romychvk/pen/PoabdEm

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Burger Menu</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    #navbar {
      border: 1px solid gray;
    }
    .burger-button__active {
      color: white;
      background-color: red;
    } 
    .burger-menu {
      display: none;
    }
    .burger-menu__active {
      display: block;
    }
  </style>
</head>
<body>

  <div id="navbar">
    <button 
      @click="isBurgerOpen = !isBurgerOpen"
      class="burger-button"
      :class="{ 'burger-button__active': isBurgerOpen }"
    >
      Меню
    </button>
    <ul
      v-if="isBurgerOpen"
      class="burger-menu"
    >
      <li>Первая ссылка</li>
      <li>Вторая ссылка</li>
      <li>Третья ссылка</li>
    </ul> 
  </div>

  <script>
    var navbar = new Vue({
      el: '#navbar',
      data: {
        isBurgerOpen: false
      },
      watch: {
        isBurgerOpen: function() {
          document.body.style.overflow = this.isBurgerOpen ? 'hidden' : ''
         // document.body.style.padding = this.isBurgerOpen ? '0' : ''
        },
      },
    })
  </script>

</body>
</html>

Vite

Важно: синтаксис <script setup> (см. SFC и синтаксис <script setup>) отличается от стандартного Vue, поэтому проще всего заменить этот тэг на просто <script>.

<template>
  <div 
    class="relative flex items-center justify-center h-24 p-8 mx-8 bg-yellow-100"
    @click="toggle"
  >
    Menu
    <ul
      class="top-24 h-96 absolute w-full p-4"
      :class="[isOpen ? 'bg-green-400' : 'hidden']"
    >
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isOpen: false
      }
    },
    methods: {  
      toggle() {
        this.isOpen = !this.isOpen
        console.log('isOpen: '+this.isOpen)
      }
    }
  }
</script>

<style>
</style>