Currently in the process of building a vue app and wondering how I can seamlessly integrate it into a template while passing variables (props) into it.
When I execute npm run dev, the app and all its components are coded with no issues.
After running npm run build, I end up with some js files in my build folder that were created by webpack.
I have come across suggestions on stackoverflow about simply loading these files into my template, creating an html element with the id "App", and letting the app initialize itself automatically.
However, I am facing a challenge now: the app makes Ajax requests which target different URLs depending on the environment (dev: api.local, test: api.testsystem.com, prod: api.livesystem.com, and so on).
This requires me to pass the URL from outside into the app. We do not build the app during deployment since it resides in a separate repository from the websites where it will be used. Plans include manually copying the build files to these projects or providing a CDN-like URL for other projects to load it. These other projects could be symfony-based websites, typo3 plugins, and more.
In React, I vaguely recall initiating an app like
React.render('app.js', {props: 'api-url': 'http://api.local'});Is it possible to do something like this:
new Vue(
<template>
<App :api-url="api-url" />
</template>
<script>
import App from "path/to/app.js";
export default {
data() {
api-url: "inject url here"
}
}
</script>
);
Alternatively, could I add a data attribute such as
<div id="App" data-api-url="http://url">I have also come across mentions of an env-loader, but I am uncertain if it would be beneficial in my specific scenario.