Best practice to inject variables from html into vue.js?

Question

I have a vue.js app running within a php-generated page. The vue app is deployed as static js/css files. The html-file with the corresponding <div id="app"> is generated by php. What is the best practice to inject variables from withhin php, via html, into vue?

I could think of either binding them as data-attribute to some html elements (which would be a rather dirty hack), or by generating a <script> segment to hold my variables - in which case I'm not sure about scoping.the variables scope and correct declaration.

Thanks

EDIT: The data I want to inject is the base url and the credentials for vue-initiated ajax requests, so I can't get those data via ajax.

Answer 1

I struggled for 2 days to get this to work, but I could not.

In the end I opted for generating a cookie from the server side and read it from my vue.js application. very easy and got to work in 10 minutes.

1. install the cookie package

   npm install vue-cookies

2. import in the main.js file

   import Vue from "vue";

   import VueCookies from 'vue-cookies';

   import App from "./App.vue";

   Vue.use(VueCookies);

3. Then use it in your component

   date:function(){

   return{

   myvariable: this.$cookies.get("myVariable")

   } }

full details here: https://reactgo.com/vue-get-cookie/