vue_components_examples/vue_grid.py

from py4web import action

from .common import session
from .components.grid import Grid

mygrid = Grid("grid_api", session)


@action("vue_grid", method=["GET"])
@action.uses("vue/vuegrid_bulma.html", mygrid)
def vue_grid():
    """This page generates a sample grid."""
    return dict(grid=mygrid())

templates/vue/vuegrid_bulma.html

[[extend 'layout_bulma.html']]

[[block page_head]]
<link rel="stylesheet" href="[[=URL('static/components-bulma/grid/grid.css')]]">
[[end]]

<div id="vue">
  <h2 class="title">Grid</h2>
  [[=grid]]
</div>

[[block page_scripts]]
<script src="[[=URL('static/components-bulma/grid/grid.js')]]"></script>
<script>
  var app = new Vue({
      el: "#vue",
      data: {},
  });
</script>
[[end]]