Unforeseen issue within Vuejs-nuxt (SSR Mode) is preventing the retrieval of the UserUUID through the getter in plugins, resulting in an unexpected '

In my vuejs-nuxt project using SSR mode, I encountered an issue when trying to call a socket event. I need to pass the userID to the socket from the store. The GetUserUUID getter functions properly in all other APIs except when called from the "plugin/socketio.js" file. I am seeking assistance on how to retrieve data from the getter.

plugins/socketio.js

export default async ({ store, $axios }) => {
   console.log(store.getters.GetUserUUID,"Current User UUID which is showing undefined");

function listenStock({ channelName, eventName }, callback) {
console.log("callback",callback);
window.Echo.channel(channelName).listen(eventName, callback);
}

//Fetch user data
listenStock(
 {
  channelName: `BalanceUpdateEvent.${store.getters.GetUserUUID}`,
  eventName: "BalanceUpdateEvent"
 },
 ({ data }) => {
   console.log(data, "socket data");
   try {
     store.dispatch("setUserBalance", data.data.userBalance);
   } catch (ex) {
     console.log(ex);
   }
 }
);

nuxt.config.js

plugins: [
  { src: '~/plugins/socketio', mode: 'client' }
]
echo: {
   plugins: ['~/plugins/socketio.js']
},

https://i.sstatic.net/ip1Ii.png

This image shows the result of console.log(store.getters), however, I specifically need to access GetUserUUID.

Answer №1

Make sure to include this code snippet in your nuxt.config.js file

export default {
  plugins: [
    ....
    { src: '~/plugins/socketio.js', mode: 'client' },
    ...
  ]
}

This will ensure that your plugin runs on the client side only

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

showing the data in a textbox using AJAX retrieved information

I have a table where additional rows can be added by the user with the click of a JavaScript function. Each row contains a drop down list, and based on the selected value, an AJAX script fetches some values to display in corresponding textfields within th ...

Encountering a Typescript error while attempting to extract state from a History object containing an enum property

My enum structure is as follows: enum values { first, second, } Within my component, I handle the history object like this: const { push, location: { state = {} } } = useHistory(); Additionally, in the same component within a useEffect hook, I have ...

blurring out of an input field and a division element

I am currently working on creating a dropdown suggestion box that hides when the input field and dropdown box are no longer in focus. My HTML code: <input type="text" id="user_address"> <div id="user_address_sg">SUGGESTION</div> <di ...

The best practices for coding Jquery plugins to adhere to style guidelines

I have been grappling with this issue for quite some time now, and I am seeking feedback from others. I am in the process of creating a personalized library to expedite web app development, and I want to ensure that I adopt the correct approach. My intenti ...

Prevent users from deleting options in Autocomplete by disabling the backspace key

I am currently working on implementing the Autocomplete component from Material-Ui library to allow users to select multiple options, but I want to restrict them from directly removing any of those options. One issue I've encountered is that users ca ...

I recently created an application using Vue and I'm exploring options for storing information to use later. Would using js-cookie be a viable solution for this?

After experimenting with Vuex to store user-selected information in my app, I found that the data was lost upon page reload. Switching to Cookies and using js-cookie solved this issue seamlessly. It makes me wonder if there is a downside to relying on cook ...

Having trouble getting Bootstrap's Javascript to function properly in a Rails 6 webpacker configuration?

Recently initiated a brand new Rails 6.0.3 project and integrated jQuery and Bootstrap into it. Surprisingly, jQuery is functioning smoothly, and the Bootstrap CSS appears to be rendering correctly. However, every attempt to execute $.fn.tooltip.Construc ...

Comparing Nodes Armed with Clusters to Nodes Sporting Threads

Can you explain the key distinctions between node cluster and Threads agogo, including their respective advantages and disadvantages? From my understanding, Threads agogo creates a background thread while node cluster initiates a new process to run in th ...

Were you intending to import the file firebase/app/dist/index.cjs.js?

Encountering the following error message: Error: Directory import 'C:\Users\My Name\Documents\Code\WebProjects\nextfire-app\node_modules\firebase\app' is not supported when resolving ES modules import ...

Triggering the body onunload event

I am currently developing a HTA that needs to make final modifications on the onunload event. However, I am facing an issue as the event does not appear to be triggered. Can someone confirm if this event is still supported? Is there an equivalent event in ...

Is there a way to redirect the user directly to the upload page without displaying the response?

Recently, I came across this code snippet that adds a progress bar to an upload form. Currently, the code displays the response from the upload page below the form. However, my goal is to redirect the user to the upload page so they can view the response t ...

What is the best way for a server to set up middleware chaining?

Currently, I am facing challenges in grasping the concept behind the ExpressJS module, particularly focusing on the execution of middleware chains. My main goal is to comprehend how a server can listen for incoming requests, and once received, pass the re ...

Creating a personalized <select> filter in Angular.js with two different JSON choices

I am working with a Q&A JSON feed that includes the following: "questions": [ { "answer": "Ea et non sunt dolore nulla commodo esse laborum ipsum minim non.", "id": 0, "poster": "Chelsea Vang", "question": "Ex ex elit cu ...

javascript cannot utilize html reset functionality

My drop down menu includes an onChange event that triggers a JavaScript method. However, when I select a new value and then click the reset button, the dropdown reverts back to its original value but the onChange event does not fire. <select onChange= ...

Why does AngularJS treat $http response.data as an object, even though PHP sends back a JSON string?

I am struggling with an AJAX call to PHP. The Angular code seems simple: $http( { // ... } ) .then( function cf_handle_success( response ) { console.log( response.data ) ; // --> [object Object] } , ...

Connect individuals based on specific criteria within a nested array

My MongoDB collection looks something like this: _id: ObjectId("5cb089e459552d8b8cc6a9e4") username: "admin" password: "12345" gender: "male" interestedIn: "female" movie: Array 0: Object id: "Avatar" title: "Avatar" poster: "~" 1: Object ...

import JavaScript script from a NPM package installation

I am facing a challenge with my server where I do not have the ability to run npm due to lack of permissions, and only have access to Apache. Currently, I am in need of a JavaScript library that is typically deployed using npm, such as https://github.com/ ...

Change the input field font style in AngularJS

Check out this Plunker link for validation of input field: http://plnkr.co/edit/iFnjcq?p=preview The validation only allows numbers to be entered and automatically adds commas. My query is, if a negative number is entered in the field, how can I change th ...

Will the bootstrap carousel continue running in the background even if I hide it?

Currently, I have incorporated the twitter bootstrap carousel into my website with the following code: <div id="slider" class="carousel slide"> <!-- Wrapper for slides --> <div class="caro ...

Ensure that input field is validated only upon clicking the save button in Angular framework

Can anyone suggest the most efficient method to validate required fields in an input form using AngularJS? I want to display an error message only after the user clicks the save button (submit). Thank you in advance. ...