yymm/flask-vuejs: Example & Tips, Flask with Vue.js.
FlaskとVue.jsを組み合わせて使うサンプルリポジトリを作っています。
Vue.jsは小さく始めることが出来るので、サーバサイドのテンプレートエンジンと抱き合わせて使うことも可能です。
巷ではSPAやSSRが流行っていますが個人的にはシンプルで好きです。
Delimiterの変更
デフォルトではFlaskのテンプレートエンジンJinja2とVue.jsのDelimiterは同じものを使用していて上手く動かせません。
ですが、FlaskもVue.jsもDelimiterを変更できます。
from flask import Flask
class CustomFlask(Flask):
jinja_options = Flask.jinja_options.copy()
jinja_options.update(dict(
block_start_string='(%',
block_end_string='%)',
variable_start_string='((',
variable_end_string='))',
comment_start_string='(#',
comment_end_string='#)',
))
app = CustomFlask(__name__)
var app = new Vue({
el: "#app",
delimiters: ["[[", "]]"],
data: {
message: "Hello Vue!"
}
})
こうすると、FlaskとVue.jsを共存させることができます。
具体的には以下のようなHTML(Jinja2テンプレート)になります。
{% extends "layout.html" %}
{% block script %}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
{% endblock %}
{% block body %}
<div id="example">
<h2>Delimiters changing!</h2>
<p>Jinja2: ((message))</p>
<p>Vue: [[message]]</p>
</div>
<script>
var example = new Vue({
el: "#example",
delimiters: ["[[", "]]"],
data: {
message: "Hello Vue!"
}
})
</script>
{% endblock %}
layout.htmlはこちら。
わりと簡単に共存できます。
実際にアプリを作ってみると、どのデータをサーバサイドにレンダリングさせるかVue.jsでレンダリングさせるかの判断がなかなか難しいです。
フロントエンドフレームワークのSSRを使用すればそれで悩む心配はなさそうですが、構成が大袈裟になりがちなのでこういうシンプルな土台を使うのも一考かもしれません。
Delimiterを変更しなくてもSingle File Componentsを使えば解決
Single File Componentsを使えばVue.jsの管理するDOMをvueファイル内に押し込めるのでわざわざDelimiterを変更することなく共存できます。
しかしただとはいきません。
Single File Componentsを使うにはコンパイル(Webpackなど)が必要になります。
Delimiterを変更する場合では、cdnやコンパイル済みvue.jsをscriptタグで読んで使っていますがこれができなくなります。
フロントエンドをコンパイルする労力を割くかどうかは時と場合によると思いますが、他のVue.jsプラグインやnpmパッケージを使うときなどはフロントエンドをコンパイルする構成にしても良いのかもしれません。
SPAやSSRが流行っている中この構成は時代を逆行している感がありますが、このまえIssueがきてnuxt.jsの話もでていて少なからずこういう構成も検討されるケースがあるのだなと思いブログに書いてみました。
もともとVue0時代に自分のために作ったリポジトリなのですが、ポチポチと星がついてVue2対応したらIssueも来たりしてVue.js人気を感じました。
Vue2.5が出たらTypeScriptにも対応する予定なので、誰かの役に立てばいいなぁと思います。
Webの未来がどうなるのかさっぱりですが、好きな技術を探して楽しんでいきたいです。
Show comments