Tengo un paquete vanilla js jsencrypt que necesitaba usar en mi aplicación nuxt, el paquete en sí funciona bien cuando se importa desde Nuxt.config.js pero tengo problemas cuando se importa usando el objeto principal del componente, déjame mostrarte mi código
nuxt.config.js //esto funciona
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 } ], },llamada de componente //esto no funciona
export default { head() { return { script: [ { src: "/js/jsencrypt.min.js", body: true } ], } }, }Estoy usando la etiqueta principal que, en teoría, debería funcionar, pero no es así.
función montada ()
mounted(){ var encrypt = new JSEncrypt(); }me devuelve un error
JSEncrypt is not definedDado que esta clase se utilizará para cifrar solo un componente, registrarlo globalmente no parece un movimiento inteligente, ¿alguien sabe cuál es el problema?
Ingresar JSEnquiry en su etiqueta principal funcionará bien, pero debe dejar tiempo para que se descargue y analice. Llamarlo en el gancho montado no permite eso.
Prueba esto en tu gancho montado.
const onAvailable = (variable, callback) => { function checkVariableIsAvailable(variable, callback) { if (typeof window[`${variable}`] === 'undefined') { setTimeout(function() { checkVariableIsAvailable(variable, callback) }, 1) } else { callback() } } checkVariableIsAvailable(variable, callback) } onAvailable('JSEncrypt', () => { var encrypt = new JSEncrypt(); }