Challenges with server side JavaScript in Nuxt.js, causing confusion with the framework

Question

Challenges with server side JavaScript in Nuxt.js, causing confusion with the framework

My partner and I are embarking on a website project for our school assignment, and we have opted to utilize Vue.js and Nuxt.js as the front-end frameworks, along with Vuesax as our chosen UI Framework. Despite our lack of experience with these tools and web development in general until recently, we have encountered a major stumbling block. Our challenge arose when attempting to create a profile drop down menu that reveals its items upon clicking the profile avatar. However, we hit a roadblock when trying to implement an event listener, as Nuxt.js (which is based on node) is intended for universal JavaScript rather than solely client-side operations. Consequently, using "document.getElementId" for event handling resulted in an error stating that it was not defined due to the absence of DOM.

https://i.sstatic.net/3o3SN.png We are now unsure about how to proceed - should we seek out a new framework or plugin/extension? We would greatly appreciate any insights offered. Our goal is to rely purely on JavaScript for front-end event management. Looking ahead, we plan to retrieve data from a MySQL database (though this may change based on feedback), considering Spring Boot as our backend framework for its capabilities in managing requests, creating Java servlets (our most familiar language), and incorporating Tomcat as well.

In our quest for solutions, we have conducted extensive research and sought advice from various sources, but specificity pertaining to our unique project has proven elusive at times. Building a coherent and compatible system of frameworks has been another hurdle we are facing. Nonetheless, we are eager and open to learning, so any guidance, feedback, or recommendations would be highly valued!

javascript spring-boot vue.js nuxt.js web-development-server

Answer 1

Answer №1

When trying to manipulate the DOM in Nuxt, you may encounter issues where both windows and document are not defined from the image.

To achieve what you're attempting, consider structuring your code as follows:

<template>
  // @click is the event listener to change the state
  <button @click="mobileNavOpen = !mobileNavOpen">Toggle btn</button>
  // bind the show class conditionally based on the mobileNavOpen state and apply 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>

Answer 2

When trying to manipulate the DOM in Nuxt, you may encounter issues where both windows and document are not defined from the image.

To achieve what you're attempting, consider structuring your code as follows:

<template>
  // @click is the event listener to change the state
  <button @click="mobileNavOpen = !mobileNavOpen">Toggle btn</button>
  // bind the show class conditionally based on the mobileNavOpen state and apply 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>

Challenges with server side JavaScript in Nuxt.js, causing confusion with the framework

Answer №1

Similar questions

What is the correct way to configure environment variables in a Next.js application deployed on Vercel?

What steps can be taken to stop data from reloading upon page refresh?

When pasting Arabic text into an input box, the words in HTML appear to be jumbled and shuffled around

The error message states: "TypeError: a.map is not a function"

Choosing a single item from multiple elements in React using React and typescript

having difficulty showing the column filter feature in the DataTable

Using jQuery to calculate mathematical operations in a form

jQuery - Error: Unexpected token SyntaxError

Regular Expression: do not include comments that are placed inside quotation marks

What is the process to enable a tab in AngularJS using Foundation's tab feature?

Is it possible for PHP to use the set cookie function to replace the cookie value set by JQuery cookie?

Developing a Generic API Invocation Function

Can a dynamic react component be inserted into a standalone HTML document without the need for file downloads or server support?

Establish a route nickname for files outside the project directory

Creating a login page with Titanium Appelerator is a breeze

Deliver an extensive JSON reply through a Node.js Express API

Incorporate a unique CSS class into the `.ck-content` element within CKEditor5 and Vue2

a JavaScript file containing only a require statement with a list of dependencies and a function

Obtain the index of a selected option in a Select Tag using Node.js/Express

Vue.js causing issues with jQuery data table