DomaiNesia

Ticker

6/recent/ticker-posts

Memakai Vue dan Jinja2 template engine bersamaan? Set Delimiters di Vue agar tidak konflik dengan Jinja


Saya sedang membuat prototipe berupa aplikasi web untuk penelitian gamifikasi yang sedang saya buat. Pada satu bagian/halaman yaitu halaman dimana permainan gamifikasi mulai dijalankan, saya memerlukan kemampuan reaktif dari javascript untuk bisa masuk tanpa harus submit data ke server melalui suatu form sebagaimana umumnya dalam aplikasi Flask.

Saya sebenarnya sangat tertarik dan ingin belajar sekaligus mencoba menggunakan Svelte, namun sayangnya untuk menggunakannya tidak semudah memasang script CDN di base template.

Akhirnya, saya memberikan kesempatan kepada Vue.js. Mengapa? Jelas, karena vue menyediakan CDN yang tinggal dipasang di halaman base template kita, mirip seperti bootstrap atau Google Fonts atau library lainnya.

Dulu saya sebetulnya sempat pernah mencoba belajar Vue. Saya pun sempat membeli buku terkait Vue. Saya tertarik karena ukurannya yang kecil/ringan dibandingkan framework lain. Namun entah kenapa saat itu saya merasa Vue agak susah dipelajari.

Ee ternyata kali ini saya sepertinya akan mencoba kembali peruntungan dengan Vue.

Nah, pelajaran yang saya dapat kali ini adalah pelajaran ketika menggabungkan Jinja2 dengan Vue. Hal ini karena saya telah mengembangkan aplikasi web saya menggunakan Flask dan tentu saja template engine Jinja2.

Saat mencoba pertama kali declarative rendering vue di jinja template, ternyata tidak muncul apa-apa di div container dimana saya menyiapkan untuk menampilkan data dari Vue. Hal ini dikarenakan secara default delimiter yang digunakan Vue sebagai placeholder untuk data yang nantinya akan ditampilkan sama persis dengan Jinja, yaitu menggunakan tanda {{ data }} .

Usut punya usut, setelah baca artikel di sini, barulah saya paham bahwa Vue tidak mau menampilkan data yang ada karena ada konlik delimiter tersebut. Jadi dalam hal ini Jinja yang menang.

Maka solusi untuk hal ini, yaitu agar Jinja dan Vue element sama-sama dapat berjalan di halaman yang sama, maka simbol/karakter yang digunakan sebagai delimiter di Vue harus dibedakan dengan yang digunakan oleh Jinja.

Sesuai artikel stakoverflow di atas, maka saya mengubah delimiter di Vue menjadi menggunakan karakter [[ data ]]. Hal ini serta merta membuat data di Vue akhirnya dapat ditampilkan.

Oke, kurang lebih itulah solusinya bagaimana menggabungkan antara Jinja dan Vue untuk bekerja di halaman web yang sama.


Semoga bermanfaat!

Post a Comment

0 Comments