I came across a vanilla js jsencrypt package which I wanted to incorporate into my nuxt application. The package functions as expected when imported from Nuxt.config.js, but I encountered issues when trying to import it using the head object from a component. Let me share the relevant code snippets below:
nuxt.config.js //working fine
head: {
title: 'App',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [
{
src: "/js/jsencrypt.min.js",
body: true
}
],
},
Component Call //encountering issues here
export default {
head() {
return {
script: [
{
src: "/js/jsencrypt.min.js",
body: true
}
],
}
},
}
I am utilizing the head tag which should work theoretically, yet it is not functioning properly.
Mounted() Function
mounted(){
var encrypt = new JSEncrypt();
}
However, an error occurs:
JSEncrypt is not defined
Since this class is only needed for encrypting within one component, registering it globally does not seem like the best approach. Any insights on what might be causing this issue?