Vue JavaScript (ECMAScript) version of Ecma-Nacl & NaCl cryptographic library.

Usage no npm install needed!

<script type="module">
  import vueNaclCrypter from '';


Build Status Known Vulnerabilities

vue-nacl-crypter: Vue JavaScript (ECMAScript) version of Ecma-Nacl & NaCl cryptographic library.

vue-nacl-crypter is a re-write of ecma-nacl & NaCl in TypeScript, which is ECMAScript with compile-time types. Library implements NaCl's box and secret box. Signing code comes from SUPERCOP version 2014-11-24.

Scrypt is a highly valuable thing for services that allow users to have passwords, while doing proper work with crypto keys, derived from those passwords.

Get vue-nacl-crypter

NPM Package

This library is registered on To install it, do:

npm install vue-nacl-crypter

vue-nacl-crypter Usage

API for secret-key authenticated encryption

Add module into code as

import Vue from 'vue'
import * as cr from 'vue-nacl-crypter' 

const Dcrypt = cr.VueNaclCrypter


Vue.use(Dcrypt) make $Dcrypt available in your Vue component codes you can call a

Secret-key authenticated encryption is provided by secret_box, which implements XSalsa20+Poly1305.

When encrypting, or packing, NaCl does following things. First, it encrypts plain text bytes using XSalas20 algorithm. Secondly, it creates 16 bytes of authentication Poly1305 code, and places these infront of the cipher. Thus, regular byte layout is 16 bytes of Poly1305 code, followed by cipher with actual message, having exactly the same length as plain text message.

Decrypting, or opening goes through these steps in reverse. First, Poly1305 code is read and is compared with code, generated by reading cipher. When these do not match, it means either that key+nonce pair is incorrect, or that cipher with message has been damaged/changed. Our code will throw an exception in such a case. When verification is successful, XSalsa20 will do decryption, producing message bytes.

Key is 32 bytes long. Nonce is 24 bytes. Nonce means number-used-once, i.e. it should be unique for every segment encrypted by the same key.

Sometimes, when storing things, it is convenient to pack cipher together with nonce (WN) into the same array.

+-------+ +------+ +---------------+
| nonce | | poly | |  data cipher  |
+-------+ +------+ +---------------+
| <----       WN format      ----> |

For this, secret_box has formatWN object, which is used analogously:

var encrypt = this.$Dcrypt.encrypt(text, nonce=null, key);
// if you dont know how to handle nonce VueNaclCrypter will handle that for you automatic

// decryption, or opening is done by
var decrypt = this.$Dcrypt.decrypt(crypt_data, key);

if any issue check


The Laravel framework is open-sourced software licensed under the MIT license.