Exploring CryptoJS in a Vue.js project

https://github.com/brix/crypto-js

I successfully installed CryptoJS using npm i crypto-js.

However, I am facing difficulty in integrating it into my project. When I attempt to use the following code:

// Decrypt
var bytes  = CryptoJS.AES.decrypt(ciphertext, 'secret key 123');

var originalText = bytes.toString(CryptoJS.enc.Utf8);

console.log(originalText); 

An error message pops up saying that CryptoJS is undefined in my code snippet shown below:

<script>
import CryptoJS from 'crypto-js'
require('crypto-js')

export default {
  name: "AnswerQuestionnaire",
  components:{
  
  },
  props: {
  
  },
  data() {
    return {
     
    }
  },

  created(){
    this.CryptoJS.AES.decrypt("zU5jEPwQSm2P0X33jgH6sg==", "sB7b5q4fp0G59R9t").toString(this.CryptoJS.enc.Utf8)
      
  },
  mounted(){
    
  }
};

The specific error message reads as follows:

VM820424:1 Uncaught ReferenceError: CryptoJs is not defined
    at eval (eval at created

Answer №1

Firstly, start by executing the command npm install crypto-js in your Vue terminal.

Next, you will need to either import or require crypto

<script>
import CryptoJS from 'crypto-js';
export default {
  created() {
    var bytes  = CryptoJS.AES.decrypt(ciphertext, 'secret key 123');

    var originalText = bytes.toString(CryptoJS.enc.Utf8);

    console.log(originalText); 
  }
}

</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Build a brand new root component in Vue JS

I am facing a challenge with destroying and re-creating the root application component. Below is my template structure: <div id="app"> {{ num }} </div> Here is the code I have implemented: if (app) { app.$destroy(); } else { ...

I am looking to obtain assistance through denomongo for guidance

The deno-mongo guide page on GitHub is no longer functional. You can find the page here: 'https://github.com/manyuanrong/deno_mongo' I am struggling to understand how to use the plugin and get it up and running. Following the example in the "Re ...

Executing a JavaScript function to submit an HTML form and circumvent the default behavior

Currently, I am utilizing a virtual keyboard that was created using JavaScript for the user interface on an embedded system. If you would like to access the source code for this virtual keyboard, you can find it here: https://codepen.io/dcode-software/pen ...

Access the API data by sending requests with the required headers which include the GUID, Username,

Assigned the task of creating a website that relies on fetching vehicle stock data from an API, I find myself struggling with this particular API. Despite my previous experience with various APIs, this one is proving to be quite challenging. Unfortunately, ...

Make sure the page preloader is visible before any other content is loaded

Currently, I am working on a straightforward preloader page that remains visible until the main content of the page is completely loaded. Despite the functionality of the loading page, my main concern lies in the quick display of the main content before th ...

Automated Copy and Paste Feature - JavaScript using Ajax

I am working on a unique auto-increment IMDB ID grabber that retrieves the ID as you type the name of a TV show. Currently, I have managed to create functionality where it checks if the field is empty; if not, it displays a button that directs you to a pag ...

What is the process for encrypting a string in JavaScript?

Is there a simple way to hash a string in JavaScript without having to create the hashing algorithm myself? Are there any reliable npm packages or built-in functions available for this task? If so, how can I utilize them to hash a string? For instance, if ...

What triggers a component to be re-rendered?

Struggling to optimize my vuejs app's performance, I can't seem to pinpoint why certain components are constantly re-rendering... Citing the lifecycle hooks, it mentions that a component should indeed re-render when data changes After thoroug ...

Discovering the method for accessing nested JSON data through ng-repeat in AngularJS

I'm attempting to access the items._id value within ng-view using ng-repeat. I am able to retrieve all data, but I am interested in specific data only. Data.json [ { _id : "td6v9db4514cc4ewew4334", firstName : 'ayaz', la ...

"Guidance on jQuery syntax: Use a textbox to filter out and hide select options with each keystroke

Is there a way to modify my existing code so that it can show or hide elements based on a filter condition, specifically for Internet Explorer? I want to wrap the unmatched elements in a SPAN tag and hide them if the browser is IE, and vice versa by remo ...

Enhance user experience with AngularJS Bootstrap autocomplete feature by automatically filling input box when hovering over dropdown options

I am currently implementing the AngularJs Bootstrap typeahead functionality. Typically, when we enter text that matches an option, the dropdown list appears. https://i.stack.imgur.com/395Ec.png What I aim for is to automatically fill the textbox with the ...

Combining LiveChatInc widget with NuxtJs for seamless integration

I've been working with NuxtJS on my project and I'm attempting to integrate LiveChatInc chat using the instructions provided on this page: I've tried using middleware to insert the JS code, but I'm encountering errors from Eslint: wind ...

Encountering a problem with Vite and PostCSS: "Assignment to invalid left-hand side"

Yesterday everything was running smoothly, but today I encountered an error message saying Invalid left-hand side in assignment. When I checked the Chrome console, it displayed the same error related to a file named ${mod.url} pointing to this source code: ...

The behavior of Android webview varies when executing JavaScript code

I am currently involved in a project that involves reading user input via voice and displaying it on a website. I am able to read all input IDs on the site using Jsoup. WebView webView = (WebView) findViewById(R.id.webview); webView.getSetting ...

Enable the event listener for the newly created element

I am attempting to attach an event listener to this HTML element that is being created with an API call handleProducts() function handleProducts() { var display = document.getElementById("display") var url = "http://127.0.0.1:800 ...

What is the best way to obtain the id of a selected row using JavaScript?

I'm attempting to utilize the JavaScript function below to extract a specific cell value from a jqgrid upon clicking. Within the following function, #datagrid refers to the table where the jqgrid is located. $("#datagrid").click(function ...

Solve the problem with SCSS at the component level in NextJS

I've decided to transition my regular React app to Next.js. In the past, I would simply import SCSS files using: import from '.componentName.scss' However, now I need to import them using: import style from 'componentName.module.scss ...

Customizing Angular 2's Webpack environment setup dynamically

Currently, I have set up Webpack to compile my Angular project. Within my project, there is an important file called env.js: module.exports.ENV = { API_URL: "http://localhost:5001/", ... }; In the webpack.common.js file, I am referencing this file l ...

Using AngularJS, you can pass serialized objects as query string parameters

I'm trying to pass nested objects as query parameters from my AngularJS Controller using the following code: $scope.redirect = function () { const params = $httpParamSerializer({ initval: { user: { id: 1, ...

Unable to establish connection via web socket with SSL and WSS in JavaScript

Below is the code I used to implement web socket: try { console.log('wss://' + hostname + ':' + port + endpoint); webSocket = new WebSocket(webSocketURL); webSocket.onmessage = function (event) { //c ...