Exploring the functionality of publicRuntimeConfig in Nuxt plugins

I have developed a new Vue socket.io plugin called @/plugins/socket-io.js

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'

Vue.use(
  new VueSocketIO({
    debug: true,
    connection: process.env.SOCKET_IO_CONNECTION,
  })
)

Is there a way to modify this to utilize publicRuntimeConfig?

This is my nuxt.config.js file:

publicRuntimeConfig: {
    peerServerHost: process.env.PEER_SERVER_HOST,
    peerServerPort: process.env.PEER_SERVER_PORT,
    peerServerPath: process.env.PEER_SERVER_PATH,
  },
  privateRuntimeConfig: {
    signalServerKey: process.env.SIGNAL_SERVER_KEY,
    signalServerCert: process.env.SIGNAL_SERVER_CERT,
    socketIOConnection: process.env.SOCKET_IO_CONNECTION,
  },

Answer №1

After some exploration, I discovered the solution.

The key was to transfer socketIOConnection to publicRuntimeConfig.

Subsequently, within @/plugins/socket-io.js

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'

export default function ({ $config }) {
  Vue.use(
    new VueSocketIO({
      debug: true,
      connection: $config.socketIOConnection,
    })
  )
}

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

The UglifyJsPlugin in Webpack encounters an issue when processing Node modules that contain the "let" keyword

Below is the code snippet from my project which utilizes Vue.js' Webpack official template: .babelrc: "presets": [ "babel-preset-es2015", "babel-preset-stage-2", ] webpack.prod.config.js new webpack.optimize.UglifyJsPlugin({ compress: { ...

Why does Request-Body(req.body) display a value while Request-QueryParams(req.queryParams) returns null?

Using vuejs-axios, I successfully transferred client-side data to the server-side using Java with SparkJAVA Framework to manage the request-response cycle. The following code snippets demonstrate how Form-Data is posted from vuejs to java. const formData ...

How can I retrieve server-side data in the client-side using NodeJs (connecting to MySql) with Vue CRUD?

Currently, I am delving deeper into Vue and to make the learning process more engaging, I have established a connection to my MySql-DB using nodeJS. Following a detailed tutorial (), I successfully implemented a Login system. Now, my goal is to retrieve d ...

Encountering a problem while running npm build (PostCSS plugin postcss-purgecss needs PostCSS 8) on vuejs3 with tailwind

I'm currently in the process of developing an application using Vue.js 3 and Tailwind CSS. While testing some configurations before diving into the project, I encountered a specific error message when running npm run build: ERROR Failed to compile wit ...

Guide to utilizing Terser in conjunction with webpack

I am currently using Webpack 6.10.2 in combination with Vue 3.9.3. I encountered an issue with Uglify.js when running npm run build due to its inability to handle ES6 code. To work around this problem, I followed the recommendation of removing Uglify fro ...

Vue specifies the location of the index.html file

I'm new to working with Vue and node, and I'm attempting to insert a global value in my project by placing my index.html in a public directory. After creating the project, I noticed that the public src folder was not generated, but I could still ...

`Finding the nodejs API route for displaying images from a database`

How can I successfully display an image from the database without getting a string of question marks instead? Click here to see the issue >>> When attempting to directly call the API using the provided link, the following result is returned: {&qu ...

Guide to resolving a blank webpage issue post running 'npm run build'

I am currently in the process of working on a project that involves Vue and Firebase. Unfortunately, I have encountered an issue where my development server is no longer rendering new routes from my Vue router after building and deploying to production. F ...

Error occurs when using Express.js in combination with linting

https://www.youtube.com/watch?v=Fa4cRMaTDUI I am currently following a tutorial and attempting to replicate everything the author is doing. At 19:00 into the video, he sets up a project using vue.js and express.js. He begins by creating a folder named &apo ...

The functionality of Highcharts-more.js is not functioning properly within a project set up using vue-cli

Recently, I have been working on a vue-cli project and attempting to create a polar chart similar to the one shown here: To achieve this, I needed to install and import the highcharts and highchart-more libraries using npm. However, upon importing both fi ...

The ideal structure for a Vue app

As a newcomer to Vue, I've been exploring different guidelines on how to use it effectively. In one resource here, the project was structured with separate directories for assets, components, routes, services, and views within a 'src' direct ...

The installation of vue-cli failed due to permission issues with error code EPERM in npm

I keep encountering an error message when I try to run npm install -g vue-cli: npm ERR! path C:\Users\End User\AppData\Roaming\npm\node_modules\vue-cli\node_modules\nan\package.json npm ERR! code EPERM ...

Utilizing Vue.js to fetch information from a post API in Node.js

I'm currently working on developing a post API in Node.js, with Vue.js as my frontend framework and using vue-resource to interact with APIs. Here is the submit function I have implemented on the frontend: validateBeforeSubmit() { var self = this ...

The installation of npm was unsuccessful due to an error: npm encountered an invalid JSON response

Warning: Peer dependency overridden by npm. Found: [email protected] in node_modules/@ivan/data-insights/node_modules/bootstrap. Bootstrap@^3.3.7 from @ivan/[email protected] version 1.7.26. Could not resolve dependency because peer bootstrap@^4.3.1 nee ...

Issue encountered: Trying to deploy firebase functions and hosting with vue-cli v3 and node.js leads to an error "No npm package found in functions source directory

My plan is to utilize Vue.js for the Frontend and Firebase Functions (Express.js) + Firestore for the Backend. Step 0: I initiated a new project on Google Firebase, then created a new Service Account with Owner's permissions to be used with Admin SDK ...

Converting a string into an array of JSON objects

I am currently attempting to send data to my NodeJS server using the HTTP protocol (vue-resource). The goal is to send an array of JSON objects structured like this : [{"name":"Charlotte","surname":"Chacha","birth":"2000-04-02"},{"name":"Michael","surname ...

I encountered an issue while trying to start my Nuxt project - facing difficulty in resolving 'fsevents' within the project directory

Whenever I start my nuxt.js project using npm run dev, I encounter compilation errors: × Client Compiled with some errors in 12.53s WARN Compiled with 2 warnings ...

Issue with Node.js: req.session data does not persist

Currently, I am working on integrating a login feature using express, nuxtjs, and express-session. The functionality works well without any issues until the page is refreshed. However, after refreshing the page, the session data is not retained. I have co ...

Establishing communication sessions with Express.js server and Vue.js client

I have encountered an issue with my project setup. I am utilizing an expressJS server to create a REST api server and a VueJS client using VueCLI. Folder Layout : .root ├── _server | ├── Files related to the server ├── _client | ├ ...

Encountering an error while setting up the object spread operator Babel plugin for ES201

Exploring the possibilities of the new ES2018 spread operator for objects led me to discovering a promising NPM package: babel-plugin-transform-object-rest-spread Here's a glimpse of my package.json: // Scripts section "scripts": { "dev": " ...