Using Vue in your existing site

Posted on 2020-05-10T12:50:46Z by Kevin Foong

Follow these steps to easily use VueJS on your existing (traditional) web page. This example below is based on a Flask website.

1. In your base template add a link to the Vue CDN. Make sure the Vue script tags are at the bottom of body and not inside head. This is because the div id="app" needs to be loaded first before we initialise Vue.

The {% block scripts %} tag is where your custom scripts will go later.

        ......
        <!-- production version, optimized for size and speed -->
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <!-- Custom Javascript -->
        {% block scripts %}
        {% endblock %}
    </body>
</html>

2. In your page, which inherits the base template above, just create a new instance of Vue inside the {% block scripts %} tag as shown below. Now every time you have a page which you want to do some Vue just add the same script tag. Also don't forget to specify the Vue delimeters as '[[' and ']]' otherwise the default '{{' and '}}' will clash with Jinja.

This will create a new instance of Vue for every page that needs Vue. 

......
{% block scripts %}
<script>
  new Vue({
    el: '#app',
    delimiters: ['[[', ']]'],
    data: {
      tabTagUsed: true
    }
  });
</script>
{% endblock %}

3. Vue can now be used on the page.

  ......
  <div id="app">
    <div class="tabs">
      <ul>
        <li :class="{ 'is-active': tabTagUsed }">
          <a href="#" @click.prevent="tabTagUsed=true">
            Tags used
          </a>
        </li>
        <li :class="{ 'is-active': !tabTagUsed }">
          <a href="#" @click.prevent="tabTagUsed=false">
            Tags not used
          </a>
        </li>
      </ul>
    </div>
  </div>
  ......

Vue is a great alternative to popular libraries like JQuery when you want an easy way to add some interactivity to your web pages.