我可以在nuxt.js项目中使用香草Javascript吗

Question

带有一些单个文件组件的js项目，这是我的vue文件。

<template>
  <div>
    <section class="hero is-fullheight is-primary is-bold">
      <div class="hero-head">
        <nav class="navbar">
          <div class="navbar-brand">
            <a class="navbar-item" href="/">
              <img src="http://bulma.io/images/bulma-logo.png" alt="Logo">
            </a>
            <div
              class="navbar-burger"
              @click="showNav = !showNav"
              :class="{ 'is-active': showNav }"
            >
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>

          <div class="navbar-menu" :class="{ 'is-active': showNav }">
            <div class="navbar-end">
              <a class="navbar-item" href="/about">About</a>
              <a class="navbar-item" href="/path">Path</a>
              <a class="navbar-item" href="/blog">Blog</a>
            </div>
          </div>
        </nav>
      </div>
    </section>
  </div>
</template>

<script>
export default {

};
    document.addEventListener("DOMContentLoaded", () => {
      const $navbarBurgers = Array.prototype.slice.call(
        document.querySelectorAll(".navbar-burger"),
        0
      );
      if ($navbarBurgers.length > 0) {
        $navbarBurgers.forEach(el => {
          el.addEventListener("click", () => {

            const target = el.dataset.target;
            const $target = document.getElementById(target);

            el.classList.toggle("is-active");
            $target.classList.toggle("is-active");
          });
        });
      }
    });
    new Vue({
      el: "#app",
      data: {
        showNav: true
      }
    });

</script>

<style lang="scss" scoped>
</style>

我想将bulma navbar与汉堡https://bulma.io/documentation/components/navbar/#navbarJsExample一起使用 我如何在我的vue代码中包含此功能。我应该使用nuxtjs的插件功能吗？

错误：未定义文档