vue_components_examples/vue_file_uploader.py

from py4web import action

from .common import session
from .components.fileupload import FileUpload

file_uploader = FileUpload("upload_api", session)


@action("vue_file_uploader", method=["GET"])
@action.uses("vue/file_uploader.html", file_uploader)
def vue_file_uploader():
    return dict(uploader=file_uploader(id=1))

templates/vue/file_uploader.html

[[extend 'layout.html']]

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

<div id="vue">
  [[=uploader]]
</div>

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