Nuxt Error : Cannot read properties of null (reading 'addEventListener') default.vue and index.vue not rendering

Question

I'm using nuxt.js and vuesax as an UI framework, I did modify my default.vue in /layouts with a basic navbar template exemple from vuesax.
Then I used @nuxtjs/router-extras to rename my "/" and redirect it to /login, I also used a vuesax input type template in my index.vue to see if I could render my /login page (navbar + input) but it is showing be this error:

client.js?06a0:103 TypeError: Cannot read properties of null (reading 'addEventListener')
at VueComponent.handleScroll (vuesax.js?574d:24324:1)
at VueComponent.mounted (vuesax.js?574d:24382:1)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
at callHook (vue.runtime.esm.js?2b0e:4235:1)
at Object.insert (vue.runtime.esm.js?2b0e:3158:1)
at invokeInsertHook (vue.runtime.esm.js?2b0e:6390:1)
at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:6609:1)
at Vue._update (vue.runtime.esm.js?2b0e:3960:1)
at Vue.updateComponent (vue.runtime.esm.js?2b0e:4075:1)
at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)

again I'm very new, heres some code:

default.vue

<template>
  <div class="center examplex">
    <vs-navbar target-scroll="#padding-scroll-content" padding-scroll center-collapsed v-model="active">
      <template #left>
        <img src="" alt="">
      </template>
      <vs-navbar-item :active="active === 'wallet'" id="wallet">
        Wallet
      </vs-navbar-item>
      <vs-navbar-item :active="active === 'profil'" id="profil">
        Profil
      </vs-navbar-item>
      <template #right>
        <vs-button>Login</vs-button>
      </template>
    </vs-navbar>
    <Nuxt />
  </div>
</template>

<script>
import Vue from 'vue'
import Vuesax from 'vuesax'

import 'vuesax/dist/vuesax.css' //Vuesax styles
Vue.use(Vuesax, {
// options here
})
export default {
  name: 'DefaultLayout',
  data:() => ({
    active: 'wallet'
  })
}
</script>

index.vue

<template>
  <div class="center content-inputs">
    hello
    <vs-input
      type="password"
      v-model="value"
      label-placeholder="Password"
      :progress="getProgress"
      :visiblePassword="hasVisiblePassword"
      icon-after
      click-icon="hasVisiblePassword = !hasVisiblePassword">
      <template #icon>
        <i v-if="!hasVisiblePassword" class='bx bx-show-alt'></i>
        <i v-else class='bx bx-hide'></i>
      </template>
      <template v-if="getProgress >= 100" #message-success>
        Secure password
      </template>
    </vs-input>
  </div>
</template>

<router>
{
"path": "/login"
}
</router>

<script>
import Vue from 'vue'
import Vuesax from 'vuesax'

import 'vuesax/dist/vuesax.css' //Vuesax styles
Vue.use(Vuesax, {
// options here
})

export default {
  data:() => ({
    layout: 'default',
    value: '',
    hasVisiblePassword: false
  }),
  computed: {
    getProgress() {
      let progress = 0

      // at least one number

      if (/\d/.test(this.value)) {
        progress += 20
      }

      // at least one capital letter

      if (/(.*[A-Z].*)/.test(this.value)) {
        progress += 20
      }

      // at menons a lowercase

      if (/(.*[a-z].*)/.test(this.value)) {
        progress += 20
      }

      // more than 5 digits

      if (this.value.length >= 6) {
        progress += 20
      }

      // at least one special character

      if (/[^A-Za-z0-9]/.test(this.value)) {
        progress += 20
      }

      return progress
    }
  }
}
</script>

middleware/redirect.js

export default function(req, res, next) {
  const redirects = [
    {
      from: "/",
      to: "/login"
    }
  ]
  const redirect = redirects.find((r) => r.from === req.url)
  if (redirect) {
    res.writeHead(301, { Location: redirect.to })
    res.end()
  } else {
    next()
  }
}

Answer 1

Vuesax is not really maintained anymore, latest commit being from 20th September 2020.

Hence why it's not part of the Nuxt CLI anymore.

If you're new, I recommend starting by using something more simple, well supported and maintained like Vuetify, Buefy, Tailwind or at least any other one available in the list.

Even starting directly with Nuxt without any prior Vue knowledge is quite risky.

---

Back to the topic, even if we fix the issues regarding a specific install issue here, we will probably face some others down the road. And since the project is not maintained anymore, it's pretty sure that at some point we will see a blocker of some sort.

Don't expect Vuesax to work with the new Nuxt3 at all for example. So yeah, sorry it's not an answer to your question but I feel like it's better if I tell you that now that later (after days of debugging).

---

PS: you're trying to use res.writeHead in a client-side middleware (redirect.js). If you want a redirect, you'll need to use more of a $router.push here to use the Vue router.