Creating a VueJS Web App that is Distributable and Distributed

My challenge is to develop a distributable app using VueJS for four different companies, each with their own unique products database and custom settings. These companies want to integrate a page on their websites that displays their specific catalogue with prices, policies, and product information.

To achieve this goal, I have taken the following steps:

  • I created an API accessible via API Keys

  • Each company was assigned its own API Key to ensure requests are associated correctly

  • I developed the VueJS app using VueCLI, incorporating components, styles, and utilizing axios for API calls. During development, I tested with one of the API keys hardcoded in axios.defaults.headers, which proved successful.

Now, the challenge lies in exporting the app in a way that allows it to be dynamically incorporated into each company's website with their respective API key. Instead of creating separate versions with hardcoded keys, I aim to have a single catalogue.js file with exposed parameters, such as the required API Key.

This approach ensures that unauthorized attempts to use the catalogue.js file will result in an API error due to incorrect credentials. I have explored exporting the app as a library or web component but encountered errors related to routing elements.

I seek guidance on resolving these issues and implementing a solution that meets the requirements. Any assistance in understanding where I may be going wrong and how best to address the problem would be greatly appreciated.

Answer №1

Consider exploring Vue Environment Variables through this link: https://cli.vuejs.org/guide/mode-and-env.html

Alternatively, you have the option to create a separate settings.json file and then load it using axios.

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

Ways to attribute a numeric worth to a choice in a JavaScript form

I am in the process of creating a form that allows users to customize and order pizza while showing them the invoice as they make their selections. Currently, I have successfully implemented the display of user-selected options, but I am struggling with a ...

Tips for evaluating the build size of a Create React App and ways to minimize it

Currently, I've been following the steps outlined in this helpful guide: https://create-react-app.dev/docs/analyzing-the-bundle-size/ and I'm gearing up to execute the analyze command to assess my app's size. Is this approach the most effect ...

Ways to determine the presence of a value in an array using AngularJs

I'm currently working on looping through an array to verify the existence of email, phone, and alternate phone in a database. My challenge lies in finding a suitable function or workaround in AngularJS that allows me to iterate through the array with ...

When the App is opened, Firestore triggers a function to run, and then again after any changes

I am looking to activate this function when the App is launched, and then whenever there is an update in my firestore data. export const getDuettsPlayer1 = (setDuetts) => { duettsRef.where("player1", "==", firebase.auth().currentUs ...

Why is my filtering and sorting function failing to function properly?

I have a collection of events represented by an array of objects, where each event contains a start date and an end date. My goal is to filter out any events that have already passed based on the current time (now), and then sort the remaining events in d ...

Determining Adjacency of <li> Elements Using jQuery Sortable() and Class Comparison

I have created a custom display builder specifically for outdoor power equipment dealers. This tool allows them to easily add, remove, and rearrange different product display sections according to their preferences. To achieve this functionality, I utilize ...

Plugin for saving inline edits in CKEditor 4

After creating a plugin for ajax save, I found the documentation confusing when it comes to implementation. How can I make the button responsive and able to save content using AJAX with PHP? Currently, I am unable to retrieve the content. Directory: /plug ...

Attempting to decode the string prior to selecting an item from the Vue.js/Nuxt array

Hey there, I really appreciate anyone who can assist me with this. I've been dabbling in Laravel for a few months and now I'm trying to dive into studying Nuxt. The specific type of translation I need help with is proving to be quite challenging ...

Chrome extension: some APIs disappear after chrome.runtime.reload() is called

Issue with my Chrome Extension involving the chrome.tabs API. Extension runs smoothly, but encounters a problem after chrome.runtime.reload(); occasionally, the chrome.tabs reference becomes undefined upon restart. This renders the extension unusable and ...

Signaling an Event from a module in the node_modules directory to the Vue application

Is there a way to capture an event emitted by a node module and receive it in a Vue file? Sample code from the JavaScript node module: const EventEmitter = require('events') class Find extends EventEmitter { // code snippets here } class Fin ...

ReactJS: streamlining collection method calls using re-base helper functions

I have been struggling to find a way to integrate ReactJS with firebase. Fortunately, I came across the amazing re-base repository which perfectly fits my needs. fb-config.js var Rebase = require('re-base'); var base = Rebase.createClass({ ...

Convert former function to use async and await system

I need to convert this function to async, but I am facing an issue where the users object obtained from mapping interactions is not returning data in the expected format. When I run the async function on the client side, my values are showing up as nil. Th ...

What is the process for loading Syntax Highlighter on pages with pre tags?

As a Blogger, I often find myself in need of demonstrating codes on my blog. To achieve this, I have been using a Syntax Highlighter developed by Alex Gorbatchev. However, a recurring issue I face is that the files load on every single page of my blog, cau ...

Discover the process of selecting an item from a list and viewing it on a separate page with the help of AngularJS and Ionic technology

I am struggling with creating a list of items that, when clicked, should take me to the corresponding post. Despite trying to use ng-click in the header, I suspect there is an issue with the route not functioning properly. As part of my testing process, I ...

You can only use RSA and DSA public keys during the babel-node installation process

I'm having difficulties with the installation process of babel-node npm i -g babel-node > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53313231363f7e3d3c373613657d67d75716b70793f777b79">[email protected]< ...

I am experiencing difficulties with the React-router useHistory function

Currently working on a project involving react and nodejs. Utilizing window.location.href to redirect to another page upon successful login, however, attempting to use useHistory for redirection without updating is yielding an error message: Error Uncaugh ...

What is the best way to assign a transition name property in Vue.js?

Is it possible to dynamically bind the transition name property in Vue.js? <transition-group :name="{ transactionAnimation: isActive }" tag="tbody" class="list-group" > //.... some code </transition-group&g ...

The <core.pid> file in Node.js is specifically generated on a single node

Running a high-availability architecture with two identical EC2 instances under a load balancer, I have a production workspace where the application is vue.js using 'nuxt' and daemonized with pm2. However, disk space on only one node keeps fillin ...

Hold off on addressing the nested loops within a TypeScript subscription

Goal: Ensure all nested loops complete processing before returning final value. Problem: Final value returned prematurely, before completion of loop processing. In the code snippet below, I am sending paramListToComplete to a data service for creating a ...

Help needed with PHP, MYSQL, and AJAX! Trying to figure out how to update a form dynamically without triggering a page refresh. Can anyone

Hey there! I'm fairly new to the world of dynamically updating databases without needing a page refresh. My goal is to build something similar to The end result I'm aiming for includes: Dynamically generating fields (Done) Loading existing dat ...