Skip to main content

Flask extension for rendering Vue.js SFCs

Project description

Flask-VueSFC

https://img.shields.io/pypi/v/Flask-VueSFC.svg https://img.shields.io/pypi/l/Flask-VueSFC.svg https://img.shields.io/pypi/pyversions/Flask-VueSFC.svg https://img.shields.io/pypi/status/Flask-VueSFC.svg

Flask-VueSFC is a Flask extension that translates and renders Vue.js Single File Components.

In short, it translates code like this

<template>
  <div>Current time is: <b>{{ date }}</b></div>
  </template>
<script>
  Vue.use(vueMoment)

  export default  {
    name: 'App',
    data() {
      return {
        date: null
      }
    },
    created() {
      this.setCurrentTime()
    },
    methods: {
      setCurrentTime() {
        this.date = this.$moment().format('dddd, MMMM Do YYYY, h:mm:ss a')
        setTimeout(() => {
          this.setCurrentTime()
        }, 1000)
      }
    }
  }
</script>

into this

<div id="vue-sfc-996dcfa8e795">
  <div>Current time is: <b>[[ date ]]</b>
  </div>
</div>
<script>
  Vue.use(vueMoment);
  new Vue({
    el:'#vue-sfc-996dcfa8e795',
    delimiters:['[[',']]'],
    name:'App',
    data(){
      return{
        date: null
      }
    },
    created() {
      this.setCurrentTime()
    },
    methods: {
      setCurrentTime() {
        this.date = this.$moment().format('dddd, MMMM Do YYYY, h:mm:ss a');
        setTimeout(()=>{
          this.setCurrentTime()
        },1e3)
      }
    }
  })
</script>

which renders something like this:

Current time is: Friday, October 16th 2020, 2:35:27 am

Disclaimer:

This project is not a replacement for webpack in any way. Depending on the complexity of one’s project and specific cases, this project might or might not be useful.

Any third party JS library used must be UMD compatible.

All code outside the Vue App must be ES5 compatible.

Usage

Install it with

pip install Flask-VueSFC

Here’s an example on how to use the extension

from flask_vue_sfc import VueSFC
from flask_vue_sfc.helpers import render_vue_component, render_vue_page

def create_app():
    app = Flask(__name__)

    VueSFC(app)

    @app.route('/example1')
    def example1():
        component = render_vue_component('index.vue')
        return render_template('example.html', component=component)

    @app.route('/example2')
    def example2():
        return render_vue_page('index.vue')

Since render_vue_component returns html syntax we need to make sure jinja doesn’t try to escape it. So be sure to always use the safe filter when rendering the component like so

{{ component|safe }}

Feel free to checkout the examples folder for other examples.

Styling

Sass styling is supported, though this needs to be tested in a complex app to determine the extent.

Escaping

Occasionally, you might need a variable to be parsed by jinja instead of vue. To achieve this, use triple parenthesis i.e {{{ variable }}}.

Checkout examples/app_with_escaping.py for a sample.

Configuration

There are configuration options used by Flask-Vue-SFC.

Option

Default

VUE_USE_MINIFIED

True

Whether or not to use the minified scripts.

VUE_PROD_MODE

False

If True, Vue components won’t be rendered at runtime.

VUE_SERVE_LOCAL

False

If True, scripts will be served from the local instance.

When VUE_PROD_MODE is set to True, all Vue components are rendered from .sfc.html files. In order to produce these files, run flask vue build before starting your app.

Motivation?

Over the past year or so, I’ve found myself working on projects which involve Vue.js and Flask/Django. In most scenarios the frontend app was a standalone application so a lot of thought didn’t have to be put into how it interacts with the backend besides through API calls. In some scenarios, however, the requirement was usage of Vue.js as library instead of a framework. The latter pattern is becoming more common with the slow demise of jQuery (Yes, yes I said it :) )

Organizing Vue.js code becomes quite problematic due to the fact there’s conventional way of organizing code when it’s not being used as a framework. Perhaps this is because it’s all dependent on the backend framework being used and it’s conventions.

Then it dawned unto me. What if devs could work with single file components directly without having to deal with webpack???

Contributions

All contributions are welcome. Feel feel free to raise an issue and open a PR if you want to fix a bug or add a feature.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

Flask-VueSFC-0.1.3.tar.gz (220.4 kB view details)

Uploaded Source

Built Distributions

Flask_VueSFC-0.1.3-py3.7.egg (231.3 kB view details)

Uploaded Source

Flask_VueSFC-0.1.3-py3-none-any.whl (224.6 kB view details)

Uploaded Python 3

File details

Details for the file Flask-VueSFC-0.1.3.tar.gz.

File metadata

  • Download URL: Flask-VueSFC-0.1.3.tar.gz
  • Upload date:
  • Size: 220.4 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.3.0 pkginfo/1.7.0 requests/2.25.1 setuptools/53.0.0 requests-toolbelt/0.9.1 tqdm/4.56.2 CPython/3.7.9

File hashes

Hashes for Flask-VueSFC-0.1.3.tar.gz
Algorithm Hash digest
SHA256 82a2c6ccf36ac274dca0bbe54b10e6a203bbb2eebd4b281b961e783953814750
MD5 0a65807e9818f859a7e8558f5d55d023
BLAKE2b-256 38e3a52c633c44deb6fa27692874901b3520afe76e7856eef1e06bf456ebfcf1

See more details on using hashes here.

File details

Details for the file Flask_VueSFC-0.1.3-py3.7.egg.

File metadata

  • Download URL: Flask_VueSFC-0.1.3-py3.7.egg
  • Upload date:
  • Size: 231.3 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.3.0 pkginfo/1.7.0 requests/2.25.1 setuptools/53.0.0 requests-toolbelt/0.9.1 tqdm/4.56.2 CPython/3.7.9

File hashes

Hashes for Flask_VueSFC-0.1.3-py3.7.egg
Algorithm Hash digest
SHA256 8b6211aabad3aec1cd57ce4bdb6bcb2be6cd67ae48d8e2b83d2cfcace7e1e189
MD5 b3d44b30670a7d40172e7c968c9a46a1
BLAKE2b-256 735c59ba6d39b3567318ba55fa9fa7e9be1506ff800a734aec09390735c3c6d3

See more details on using hashes here.

File details

Details for the file Flask_VueSFC-0.1.3-py3-none-any.whl.

File metadata

  • Download URL: Flask_VueSFC-0.1.3-py3-none-any.whl
  • Upload date:
  • Size: 224.6 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.3.0 pkginfo/1.7.0 requests/2.25.1 setuptools/53.0.0 requests-toolbelt/0.9.1 tqdm/4.56.2 CPython/3.7.9

File hashes

Hashes for Flask_VueSFC-0.1.3-py3-none-any.whl
Algorithm Hash digest
SHA256 1e40f85b5bb58825fb1997856c006d3394a6046a40c35a24893bbd2be894e4da
MD5 a74a555281ab15ff3a4a9a0006e01b4b
BLAKE2b-256 3f611366e94ebc16b57f76e691977e0e7fb13910b0f72ef62707787996ff4a66

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page