title: What is the best way to pass flask variables directly to vue?
body: <p>I'm working on a vizualisation app with a flask server and vue.js for the front end.</p>
  
  <p>Similar questions on the subject look for a way to make vue.js and flask variable syntax not enter in conflict like shown <a href="https://github.com/yymm/flask-vuejs" rel="nofollow noreferrer">here</a>. </p>
  
  <p>In my case, I'm wondering if there is anyway to directly assign vue.js variable data.d with a variable send from Flask render_template method.</p>
  
  <pre><code>    var app = new Vue({
        el: '#app',
        data: {
          'd': {{Flask-variable}}
        },
  })
  </code></pre>
  
  <p>Here is the code</p>
  
  <p>Flask</p>
  
  <pre><code>import os
  import flask
  import json
  from flask import Flask, render_template, request, redirect, url_for
  from script_python import kernel as K
  
  
  def App():
      # Initialize the Flask application
      app = Flask(__name__)
      app.config.from_object('marianaViz.config.ConfigClass')
  
      #return index.html on load
      @app.route('/')
      def index():
          d = [{'x':1, 'y':0, 'z': 1},{'x':1, 'y':0, 'z': 2}]
          return flask.render_template("histogram.html",d= flask.jsonify(**K.JSONResponse(data = d,error=False,message='')))
  
      return app
  </code></pre>
  
  <p>js</p>
  
  <pre><code>var app = new Vue({
    el: '#app',
    data: {
      'd':{{ d.data|tojson|safe}},
    },
    created:function(){
          this.drawHistogram(d),
        },
    methods:{
    // Called when the Visualization API is loaded.
      drawHistogram: function(){
        var data = null;
        var graph = null;
        var self = this;
  
  
        // Create and populate a data table.
        console.log(d);
          data = self.d;
          //data = [{x:1, y:0, z: 1},{x:1, y:0, z: 2},{x:2, y:0, z: 3},{x:3, y:0, z: 2},{x:4, y:0, z: 1},{x:5, y:0, z: 1},{x:6, y:0, z: 2},{x:7, y:0, z: 3},{x:8, y:0, z: 2},{x:9, y:0, z: 1},{x:10, y:0, z: 1},{x:11, y:0, z: 2},{x:12, y:0, z: 3},{x:13, y:0, z: 2},{x:14, y:0, z: 1},{x:15, y:0, z: 1},{x:16, y:0, z: 2},{x:17, y:0, z: 3},{x:18, y:0, z: 2},{x:19, y:0, z: 1}];
  
          // create some nice looking data with sin/cos
  
          /*
          function custom(x, y) {
          return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
          }
          var steps = 4;  // number of datapoints will be steps*steps
          var axisMax = 15;
          var axisStep = axisMax / steps;
          for (var x = 0; x &lt;= axisMax; x+=axisStep) {
            for (var y = 0; y &lt;= axisMax; y+=axisStep) {
              var z = custom(x,y);
                data.push({x:x, y:0, z: z});
            }
            console.log(data);
          }
          */
  
          // specify options
          var options = {
            width:  '300px',
            height: '300px',
            style: 'bar',
            xBarWidth: 0.5,
            yBarWidth: 0.5,
            showPerspective: true,
            showGrid: true,
            showShadow: false,
            "showYAxis":false,
            "xLabel":'',
            "zLabel":'',
            cameraPosition: {
                horizontal: 0*3.14,
                vertical: 0*3.14,
                distance: 1.8
              },
              legendLabel: '',
            keepAspectRatio: true,
            verticalRatio: 0.5,
            "backgroundColor":'black',
            "showLegend": true,
            "xCenter":'50%',
          };
  
          var camera = graph ? graph.getCameraPosition() : null;
  
          // create our graph
          var container = document.getElementById('histogram');
          graph = new vis.Graph3d(container, data, options);
  
          if (camera) graph.setCameraPosition(camera); // restore camera position
  
  
    }
  
      }
  })
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;!--Vuejs--&gt;
       &lt;script type="text/javascript" src="{{url_for ('static',filename='js/vue.js')}}"&gt;&lt;/script&gt;
      &lt;!--css--&gt;
      &lt;link href="{{url_for ('static',filename='css/disp.css')}}" rel="stylesheet" type="text/css"/&gt;
      &lt;!--Vis visualisation lib--&gt;
      &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet" type="text/css"/&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"&gt;&lt;/script&gt;
      &lt;!--&lt;script type="text/javascript" src="/front/lala_web/vis.js"&gt;&lt;/script&gt;--&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;div id="app"&gt;
              &lt;h2&gt;Histogram:&lt;/h2&gt;
              &lt;div id="histogram"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body &gt;
          &lt;!--display.js--&gt;
           &lt;script type="text/javascript" src="{{url_for ('static',filename='js/histogram.js')}}"&gt;&lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>