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.