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!

Nuxt has components such as client-only that can be used to execute code only in the client side. That being said, usually with Vue you wouldn't be usually interacting with the DOM directly. Your question too broad as it could be a number of issues. Instead try posting the code you are trying to execute and where/when you are executing it. — Alexander Staroselsky
– Alexander Staroselsky, Commented Oct 7, 2020 at 19:30
Also window and document should be available in lifecycle hooks nuxtjs.org/guides/concepts/… — Alexander Staroselsky
– Alexander Staroselsky, Commented Oct 7, 2020 at 19:39
That you use getElementId raw DOM with a framework and don't know if you do it right strongly suggests that you're doing it not in the way that it was intended by the framework. Consider addressing this first. was meant for server-side javascript rather then strictly client side - no, it was meant for universal JS, i.e. it renders on both server and client side. Use guards for conditional client- and server-only code - ifs and lifecycles. E.g. mount is ignored on server. See nuxtjs.org/guides/concepts/nuxt-lifecycle . What was your motivation for Nuxt? You may or not need it. — Estus Flask
– Estus Flask, Commented Oct 7, 2020 at 19:41
@AlexanderStaroselsky thanks for your response! I downloaded the "client-only" component and put it to use, but when I tried again, I get the same error; i've pasted the image in my original question — Angela C
– Angela C, Commented Oct 7, 2020 at 22:55
@EstusFlask That was my mistake, sorry for the bad wording! Yes, it is universal js, but we thought that the server side rendering was causing the issue after doing some searching (may be wrong though). Our motivation for using Nuxt was just so we could easily make and run a project in a few steps with all the dependencies and files already installed for us; the Vuesax documentation also recommended we use those frameworks together. As beginners, it seemed like a quick, easy, and good option for us, but other than that, there's no other reason why we used it — Angela C
– Angela C, Commented Oct 7, 2020 at 23:03

Emmanuel Neni · Accepted Answer · 2020-10-07 23:47:49Z

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>

Collectives™ on Stack Overflow

Nuxt.js server side Javascript issue, framework confusion

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related