tpenaranda / vue-cryptojs Goto Github PK

const decryptedText = this.$CryptoJS.AES.decrypt(encryptedText, "Secret Passphrase").toString(this.CryptoJS.enc.Utf8)

to

const decryptedText = this.$CryptoJS.AES.decrypt(encryptedText, "Secret Passphrase").toString(this.$CryptoJS.enc.Utf8)

I have installed this module by
npm install vue-cryptojs

version:
"vue-cryptojs": "2.4.5"
"vue": "2.7.14"

Then in main.js

import VueCryptojs from 'vue-cryptojs';
Vue.use(VueCryptojs);

But when I try to use it on my component

const encryptedText = this.$CryptoJS.AES.encrypt("Hi There!", "Secret Passphrase").toString()

Got an error:

Uncaught TypeError: Cannot redefine property: $CryptoJS
    at Function.defineProperties (<anonymous>)
    at Object.install (app.js:329626:383)
    at Vue.use (app.js:343911:28)
    at Object.install (app.js:329626:765)
    at Vue.use (app.js:343911:28)

Also I gon aerror:
[Vue warn]: provide() can only be used inside setup().

How to solve?

Can this be used with Nuxt3, I installed it but I think it needs some extra configurations.
Any help would be very much appreciated.

I am using nuxt 2.15.8, and I created a plugin like this:

import Vue from 'vue'
import VueCryptojs from 'vue-cryptojs'

Vue.use(VueCryptojs)

Everything works, but the first time I start my local server I get this error in the console:
"[Vue warn]: provide() can only be used inside setup()"
wich I cannot remove.
Does anyone know how to solve it?

Would be great to be able to not load the full library to optimize your build. If that's even possible.

Something like this maybe?
Vue.use(VueCryptoJS, { modules: 'aes, sha256' })

How to use it with Vue3

As for the context of why I'm trying to use vue-cryptojs is to receive an encrypted data from URL params, then display the data decrypted on the page. First, I ran npm install vue-cryptojs command how was it oriented by your README document and rightly after I imported and added the plugin to the Vue instance, as the following:

main.js file:

// Code revised in order to maintain objectivity
import { createApp } from 'vue';
import CryptoJS from 'vue-cryptojs'
import App from './App.vue';

const app = createApp(App);
app.use(CryptoJS);

app.mount('#app');

This is the error when I run my app, without any further changes:

Image

vue-cryptojs.min.js?b73b:1 Uncaught TypeError: Object.defineProperties called on non-object
   at Function.defineProperties (<anonymous>)
   at Object.install (webpack-internal:///./node_modules/vue-cryptojs/dist/vue-cryptojs.min.js:1)
   at Object.use (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3244)
   at eval (webpack-internal:///./src/main.js:43)
   at Module../src/main.js (app.js:1371)
   at __webpack_require__ (app.js:854)
   at fn (app.js:151)
   at Object.1 (app.js:1468)
   at __webpack_require__ (app.js:854)
   at checkDeferredModules (app.js:46)

Maybe that's subject for another issue, but also I'm unsure about how I'd use it on my SFC components since we are using Vue 3's Composition API (I don't know if that makes any difference) and also the introduced syntax sugar <script setup>. Found references on usage of your solutions often access the CryptoJS instance through this reference, which (as far as I'm concerned) works differently in the scope I just mentioned.

Observation

I'm very new to Vue and I don't have much experience with web development in general, even less on front-end development. If any info is missing or something feels ambiguous, let me know and I'll elaborate better.

Hi. Would it be possible that you integrate a types.ts file to use your dependency in Typescript projects? Especially when Vue 3 brings good Typescript support it would be a good improvement for your project. Thanks

Would like to know how this package can be imported to veux store (vue3) and then use it ?

i wanted to load this in main.js
and call this one with window, can this one do that ?
thanks

Hi!
I have installed this module by
npm install vue-cryptojs

Then in main.js

import VueCryptojs from 'vue-cryptojs'

new Vue({
  router,
  store,
  VueCryptojs,
  render: h => h(App)
}).$mount('#app')

But when I try to use it on my component

const encryptedText = this.$CryptoJS.AES.encrypt("Hi There!", "Secret Passphrase").toString()

Got an error:

"TypeError: Cannot read properties of undefined (reading 'AES')"

I have try to print this.$CryptoJS the result is undefined

What is wrong?

TypeError: Cannot read property 'sigBytes' of undefined

this is what i get for testing it

at least give dummy signature for it

Vue.CryptoJS.HmacSHA1('Signature','Message')

this.CryptoJS.HmacSHA1('Signature','Message')

this.$CryptoJS.HmacSHA1('Signature','Message')

I used the following to encrypt and decrypt functions according to the Crypto-js documentation but i get an error

let ciphertext = this.CryptoJS.SHA1('Message', 'Key')
let decryption = this.CryptoJS.SHA1.decrypt(ciphertext, 'Key')

error: this.CryptoJS.SHA1.decrypt is not a function"

i can encrypt just fine but i can't decrypt.