Nuxt.js server side Javascript issue, framework confusion

Question

A partner and I are working on website for a school project, and we have decided to use Vue.js and Nuxt.js as the front-end frameworks, and Vuesax as a UI Framework. Neither of us have any experience with these frameworks or frankly web development until recently. We ran into our first major issue when we were trying to create a profile drop down menu, where the items of the menu become visible when you click the profile avatar, however when trying to use the event listener, we realized Nuxt.js (based on node) was meant for universal javascript rather then strictly client side, so when we use "document.getElementId" for event handling, it says that it is not defined. (no DOM)

We really don't know what to do from here - find a new framework or plug-in/extension - and we are wondering if we could get some insight. We want to be able to use Javascript purely to handle frontend events. Moving forward, we also want to fetch information from a database (currently in MySQL but may change due to feedback), and we were thinking of using Spring Boot as our backend framework, as it allows us to handle requests, create servlets in Java(our most comfortable language)and also has Tomcat.

We have done a lot of research and consulted a lot of websites and acquaintances, but sometimes it is difficult to find things that pertain to something so specific, in this case our project. We are also having trouble finding a system of frameworks that is cohesive and compatible with each other. We are more than willing to learn, so any insight, feedback or suggestions are appreciated!

Answer 1

From the image, you are trying to perform dom manipulation in nuxt and both windows and document are not defined.

To do what you're trying to do you have to try it like this.

<template>
  // @click is the event listener to change the state
  <button @click="mobileNavOpen = !mobileNavOpen">Toggle btn</button>
  // bind the show class conditonally according to mobileNaveOpen state and add the display state to the show class.
  <div :class="{show : mobileNavOpen}">
    <ul class="navbar-nav align-items-center">
      <li class="nav-item active">
        <nuxt-link class="nav-link" to="/">
          Home
        </nuxt-link>
      </li>
      <li class="nav-item">
        <nuxt-link class="nav-link" to="/about">
          About
       </nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
 export default {
    data() {
      return {
        mobileNavOpen: false,
      }
    },
    methods: {
      closeMobileNavbar() {
        this.mobileNavOpen = false
      }
    }
  }
</script>