[Tech Tidbits] Jekyll + Vue, and working around the ‘delimiters’ problem

Published in

#SpeakForMe

3 min readDec 15, 2017

At https://speakforme.in (Source: https://github.com/speakforme/frontend ) we use an approach that is probably not very common — we generate a static site using Jekyll. And that Jekyll site fires up a Vue.JS app when loaded in a browser.

Ideally, if you are going down such a path, you should probably use nuxt.js and generate a static site with a very Vue-ey codebase. (In case you don’t know, nuxt is a server-side-rendering and/or static-site-generating framework built on top of Vuejs.)

BUT, we had 2 days to build #SpeakForMe and Abhay Rana (Nemo) and yours truly (Arnav Gupta) were working well past midnight, against the clock, with not a very synchronized communication channel on Slack. So it started off as Jekyll site, like most quickly-launched websites are (because Github supports hosting Jekyll sites out of the box).

A few hours down the line, we figured, jQuery -ing our way into multiple email templates, and i18n-ed UI and i18n-ed email drafts would turn this codebase into a huge mess, so Nemo decided to dump the jQuery code and use Vuejs.

Problem was he was using Vuejs for the first time, and I do have some Vue experience, but haven’t generated static sites with it. Although the learning curve is not too steep, learning nuxt.js was lower on the priority tree than actually getting the campaign up and running. So we kept Jekyll in place to generate the basic page skeletons, and more importantly parsing the various data sources (some yml, some csv, some json). Jekyll is very good at parsing data sources and injecting then into HTML files.

I think that was a much longer introduction than I ever intended to write, but coming down to the problem, Jekyll uses Liquid syntax, which means data goes into templates somewhat like this

<html>
Some static data
This is some dynamic person's name: {{ persion. name}}, loaded from maybe a json.
His age is {{ person.age }}
</html>

Now that is very similar to the Handelbar-y templates that Vuejs uses.

So the problem was, when we write Vue templates into our HTML file, they get parsed by Jekyll while generating the static site.

In comes the solution, that the Vuejs team had been so thoughtful to keep a provision for, the delimiters key in a Vue component.

Usually you declare a Vue component somewhat like this —

Vue.extend({
    data: {
        a: 10,
        b: 'wow'
    },
    methods: {
        doSometing: function () {
            console.log("OMG!!")
        }
    },
    template: "<div> What are you doing on {{day}} ? </div>"
})

If you want to use some other form of delimiters, you can use this instead —

Vue.extend({
    delimiters: ["((", "))"],
    data: {
        a: 10,
        b: 'wow'
    },
    methods: {
        doSometing: function () {
            console.log("OMG!!")
        }
    },
    template: "<div> What are you doing on ((day)) ? </div>"
})

So delimiters is an array of 2 items, first and second describing the opening and closing delimiters of template data hooks.

Hope this helps.

P.S. If you’re reading this, you are a technology person. And if you’re a technology person, I am sure, if you read up on the internet from unbiases and non-partisan sources, you’ll realise Aadhaar has serious technical flaws and cannot be forced upon us until they are fixed. If you are convinced, then please go to https://speakforme.in and sent a petition to your MP to speak for you in the Parliament and make the Govt answer to us about Aadhar. Also send petitions to your Bank and Mobile operator asking them to stop harassing you to link Aadhaar.

[Tech Tidbits] Jekyll + Vue, and working around the ‘delimiters’ problem

Written by Arnav Gupta