I am looking for a way to connect my Vue CLI app to a server back-end. The server will send a view template along with data payload, and I need to inject that payload as JSON into the Vue app as a data property.
Here is a snippet of the index.html file generated by Vue CLI (I disabled filename hashing in vue.config.js):
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link href=/css/app.css rel=preload as=style>
<link href=/css/chunk-vendors.css rel=preload as=style>
<link href=/js/app.js rel=preload as=script>
<link href=/js/chunk-vendors.js rel=preload as=script>
<link href=/css/chunk-vendors.css rel=stylesheet>
<link href=/css/app.css rel=stylesheet>
</head>
<body>
<div id=app>
</div>
<script src=/js/chunk-vendors.js></script>
<script src=/js/app.js></script>
</body>
</html>
The main.js file contains:
import Vue from 'vue';
import SiteContainer from './components/layout/SiteContainer.vue';
new Vue({
render: h => h(SiteContainer)
}).$mount('#app');
I want to pass the data received from the server template as follows:
<div id="app" :data="{{ json-string-of-data-payload-from-server }}">
In order to access this data in SiteContainer, I would use props like this:
props: [
'data'
]
However, I faced issues where the :data property was lost due to the render method replacing the #app div with the site-container component.
I tried passing a second argument to render with data, but couldn't make it work. This approach also involves changes in main.js rather than the server-generated view template where the JSON data needs to be present for communication between the server and Vue app.
If you have any suggestions on how to successfully transfer data from the server-generated view template to the Vue CLI app, please let me know. Thank you!