Currently, I am utilizing nuxt.js along with vuesax as my UI framework. I made particular adjustments to my default.vue file located in the /layouts directory by incorporating a basic navbar template example from vuesax.
Subsequently, I employed @nuxtjs/router-extras to alter the route of "/" and direct it to /login. Furthermore, I integrated a vuesax input type template in my index.vue to test if the rendering of my /login page (navbar + input) is functioning correctly, but unfortunately, an error surfaced:
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)
https://i.sstatic.net/gOgDf.png
As a newcomer, here are some snippets of 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()
}
}