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

Utilizing vue-socket.io in conjunction with vuex for real-time functionality: A comprehensive guide

I currently have a feed where users can vote on posts. Server > node, express, socket.io v2.3.0 Server > app.js client.on('connection', socket =>{ socket.emit('success', {message: 'Server Accepting Connections'}); ...

Design with Internal Elements

Seeking a pattern similar to the code snippet provided below. Interested in learning how to create MyComponent. render(){ <MyComponent> <MyComponent.Something> These children will be displayed </MyComponent.Something> <MyC ...

Code snippets to reduce excess white space on a website using HTML and CSS

On my website, there are multiple tabs, each containing content from an HTML file. When a user clicks on Tab1, boxes with images are displayed. The layout can be seen in the following Code Demo: Code Demo here There seems to be extra space before and afte ...

Using knex.js to pipe data to an express server

I'm encountering an issue with knex.js and express. Here is the code snippet in question: userRouter.get('/:userId', function (req, res) { DB('users').where({ id: req.params.userId }).first('name').pipe(res); }); ...

Leverage the sync function within the await .then("sync") method in JavaScript

If a synchronous function is called within the .then part of an asynchronous await .then, such as: await asyncFunc(...) .then(res => sendMSG(res)) .catch(err => next(err)); function sendMSG(res){ xyz } The sync function sendMSG i ...

Devising a method to display configurable products as related items along with their customizable options in Magento

I am in the process of creating an e-commerce website using Magento for a client. The issue I am facing is that when I include a configurable product as a related item, it displays the product but without a checkbox. From what I have researched, Magento do ...

Is utilizing unregistered HTML elements for semantic purposes considered poor practice?

When it comes to styling and semantic purposes, I am considering using unregistered web components. This means utilizing tags like <t-card></t-card> without registering them with customElements.define. Surprisingly, the browser and stylesheets ...

Generate a new item using an existing one

I am seeking to extract the desired output from the provided input: Input Configuration: var inputParams = { 'inputDetails' :[ { 'field' : 'specificationName', 'value' : 'strong'}, { ...

Removing the gap between the clicked point and the draw point in Html5 canvas

To better understand my issue, please refer to the image linked below: In the image, you can see that when I scroll down and click on the canvas to point a position, it creates space between the clicked point and where the line is drawn. Below is the cod ...

Designing a fixed bottom footer enclosed within a wrapper that expands from the top header to the bottom footer

I have created the basic structure of my webpage using HTML / CSS. However, I now realize that I need a sticky footer that remains at the bottom of the screen with a fixed position. Additionally, I want the main content area, known as the "wrapper," to str ...

Encountering the error 'Cannot read property 'length' of undefined' while attempting to fetch data from a URL using node.js

While attempting to create a Discord-Bot capable of looking up definitions on urbandictionary, I encountered an error after trying to fetch the json from their api. const args = Array.prototype.slice.call(commandArgs); if (!args.length) { return m ...

Enhancing Vue.js functionality with v-model for seamless global data access

I am currently developing a web application that allows users to collaborate on projects. The app's architecture is structured in the following manner: Component A (the main app container) Components B1-Bn (including header, footer, and main window, ...

Vue Single Page Application - invoking methods across all components

I am currently developing a notification feature that can be triggered from any component. It utilizes a straightforward Vuetify v-snackbar. Within App.vue <router-view :key="$route.fullPath"></router-view> <v-snackbar :valu ...

Storing keys and multiple maps with React applications

Having a multiple array with an option set created, everything is functioning correctly const groups1 = OrgServices.reduce((all, cur) => ((all[cur.grouptype] ??= []).push(...cur.servicetype), all), {}); const output1 = Object.entries(groups1).map ...

Tips for preventing the overwriting of a JSON object in a React application

I'm trying to compare two JSON objects and identify the differing values in the second JSON object based on a specific key. My goal is to store these mismatched values in a new JSON object. The current issue I'm facing is that when there are mult ...

Jquery Plugin fails to generate dynamic elements effectively

I developed a masking jQuery script that dynamically adds elements to an existing input element. var link = $('<a title="show" role="link" href="#" class="masker-value">show</a>'); wrapper: function() { container = $(container) ...

Error: React unable to locate module './WebpackMissingModule'

Recently I started diving into React, and I'm encountering some difficulties trying to export components. Here is my current index.js file setup: import React from 'react'; import ReactDOM from 'react-dom'; import SearchBar from ...

Having trouble accessing news feed with jQuery due to an unexpected token error when attempting to cross domains

I am attempting to access the Yahoo News feed from a SharePoint site, but it is causing a cross-domain access issue. Despite trying various solutions found on numerous websites and blogs, I still cannot resolve the problem. (I am executing this code in the ...

chart.js version 3 does not display the correct date data on the time axis

Struggling to make chart.js work with a time axis is proving to be quite challenging for me. The code I have is as follows: <html> <head> <script src="https://cdn.jsdelivr.net/npm/moment"></script> <script src="https://cdnjs.clo ...

Using Jmeter's JSON Extractor for parsing response and extracting token value

Currently facing an issue with extracting the "webToken" response. I have attempted using both $..webToken and $.webToken as JSON path expressions, but no luck so far. Any suggestions on how to correctly extract this information? This is for use in JMete ...