In my application, I am using vue-router with single-file components in the .vue format. These components are bundled using browserify and served by a flask webserver which provides global configuration settings such as page title and layout order in JSON format. However, I have been facing challenges in cleanly passing these globals into the app.
The entry point for browserify is main.js:
var Content = require('./vue/Content.vue');
var App = Vue.extend();
var router = new VueRouter({ history: true });
router.map({
'/': { component: Content, name: 'home' }
});
router.start(App, '#app');
index.html, which is served by the flask webserver:
<body>
{% with ga_id = ''|get_env('GA_ID') %}
<div id="app" ><router-view ga-id={{ga_id}} global-settings={{globalsettings|tojson|safe}}></router-view></div>
{% endwith %}
<script type="text/javascript">
window.global_settings = {{globalsettings|tojson|safe}};
</script>
<script src="/js/build.js" defer></script>
</body>
Main component of the app, App.vue:
<template>
</template>
<script type="text/javascript">
var app = {
props: ['gaId', 'globalSettings'],
ready: function ready() {
console.log(this.gaId); //returns expected string
console.log(this.globalSettings); //truncated at first space in the string
console.log(window.global_settings); // returns expected json
},
module.exports = app;
</script>
For completeness, here is routes.py:
@APP.route('/', methods=['GET'])
def index():
settings = APP.app_config['settings']
return render_template('index.html', rawsettings=settings)
I feel uneasy about setting a global variable on the window object to pass it to Vue. I have attempted setting it through the data function in Vue.extend in main.js:
Vue.extend({
data: function() {
return {
global: 'test'
}
}
})
However, this.global is undefined in App.vue. Is there a more appropriate pattern I should be following?