Vue instance in Jekyll

In this post, we’ll go through how to embed and use vue from cdn in jekyll post. It’s pretty straightforward to implement. The only thing that we need to make sure is that we don’t mix jekyll’s moustache {{ }} syntax collide with vue.

There are two ways achieve this:

1. Either make use of ` {% raw %}… {% end raw %}` within your content.
2. Or, by adding delimeter options in your vue instance.

The result below is being rendered by adding delimeter in Vue instance

---

[[ message ]]

---

Add this portion of div with id=”app” in your markdown content

<div id="app">
  [[ message ]]
  <button name="button" v-on:click="counter++">Counter: [[ counter ]] </button>
</div>

Include this at the end of your markdown

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    delimiters: ['[[', ']]'], // changes your delimeter to [[ ]]
    data: {
      counter: 0,
      message: "Hello World from Vue! 🔮",
    },
  });
</script>

That’s all to implement Vue in your jekyll post and make your content more interesting and interactive. Thanks for reading!