vue-cryptojs 2.4.0 → 2.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -20
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,39 +6,32 @@ A small wrapper for integrating crypto-js into Vue3 and Vue2
|
|
|
6
6
|
npm install vue-cryptojs
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
### Vue3
|
|
10
|
+
Entry file:
|
|
10
11
|
```js
|
|
11
|
-
|
|
12
|
+
|
|
12
13
|
import { createApp } from 'vue'
|
|
13
14
|
import VueCryptojs from 'vue-cryptojs'
|
|
14
15
|
|
|
15
16
|
createApp(...).use(VueCryptojs).mount(...)
|
|
16
|
-
|
|
17
|
-
// Vue2
|
|
18
|
-
import Vue from 'vue'
|
|
19
|
-
import VueCryptojs from 'vue-cryptojs'
|
|
20
|
-
|
|
21
|
-
Vue.use(VueCryptojs)
|
|
22
17
|
```
|
|
23
|
-
## Usage:
|
|
24
|
-
This wrapper bind `CryptoJS` to `Vue` or `this` if you're using single file component.
|
|
25
18
|
|
|
26
|
-
|
|
19
|
+
TS Component:
|
|
27
20
|
```js
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
21
|
+
<script setup lang="ts">
|
|
22
|
+
import { inject } from 'vue'
|
|
23
|
+
import CryptoJS from 'crypto-js'
|
|
24
|
+
|
|
25
|
+
const cryptojs = inject('cryptojs') as typeof CryptoJS
|
|
26
|
+
</script>
|
|
31
27
|
|
|
32
|
-
Directly on a template:
|
|
33
|
-
```js
|
|
34
28
|
<template>
|
|
35
|
-
<
|
|
36
|
-
<
|
|
37
|
-
{{ $CryptoJS.AES.encrypt("Hi There!", "Secret Passphrase").toString() }}
|
|
29
|
+
<p>{{cryptojs.AES.encrypt("Hi There!", "Secret Passphrase").toString()}}</p>
|
|
30
|
+
<p>{{cryptojs.AES.decrypt("U2FsdGVkX1/zclTGSirKJ+oYxGJFRR96i9MkjOb8X0s=", "Secret Passphrase").toString(cryptojs.enc.Utf8)}}</p>
|
|
38
31
|
</template>
|
|
39
32
|
```
|
|
40
33
|
|
|
41
|
-
|
|
34
|
+
`inject` on Composition API without TS:
|
|
42
35
|
```js
|
|
43
36
|
<script>
|
|
44
37
|
import { inject } from 'vue'
|
|
@@ -53,7 +46,31 @@ export default {
|
|
|
53
46
|
}
|
|
54
47
|
}
|
|
55
48
|
</script>
|
|
49
|
+
```
|
|
56
50
|
|
|
51
|
+
### Vue2
|
|
52
|
+
```js
|
|
53
|
+
import Vue from 'vue'
|
|
54
|
+
import VueCryptojs from 'vue-cryptojs'
|
|
55
|
+
|
|
56
|
+
Vue.use(VueCryptojs)
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
This binds `CryptoJS` to `Vue` or `this` if you're using single file component.
|
|
60
|
+
|
|
61
|
+
Simple AES text encrypt/decrypt example:
|
|
62
|
+
```js
|
|
63
|
+
const encryptedText = this.$CryptoJS.AES.encrypt("Hi There!", "Secret Passphrase").toString()
|
|
64
|
+
const decryptedText = this.$CryptoJS.AES.decrypt(encryptedText, "Secret Passphrase").toString(this.$CryptoJS.enc.Utf8)
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
Directly on a template:
|
|
68
|
+
```js
|
|
69
|
+
<template>
|
|
70
|
+
<img alt="Vue logo" src="./assets/logo.png" />
|
|
71
|
+
<HelloWorld msg="Hello Vue 3 + Vite" />
|
|
72
|
+
{{ $CryptoJS.AES.encrypt("Hi There!", "Secret Passphrase").toString() }}
|
|
73
|
+
</template>
|
|
57
74
|
```
|
|
58
75
|
|
|
59
76
|
Please kindly check full documention of [crypto-js](https://github.com/brix/crypto-js)
|