Vue.js integration

Vue.js is a client-side JavaScript framework for building web user interfaces. It bears a great template language that makes it easy to render JSON in HTML form. Sircl integrates with Vue.js to add the capability to render JSON in your web pages.

Setup

Vue.js is a JavaScript framework for building web applications with JavaScript and templates.

You can install Vue.js according to the instructions on the Install link of https://vuejs.org/, or you can install it by including the following SCRIPT tag using the unpkg CDN:

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

To setup Vue.js in combination with Sircl, you need to install following files in order:

• Cascading style sheets
  • sircl.css
• Javscript:
  • jquery.js
  • vue.global.prod.js
  • sircl.js
  • sircl-vue.js

You can replace sircl.js by sircl-bundle.js, and/or add more Sircl libraries. And of course you can use the minified versions of Sircl.

Rendering Templates

The purpose of mixing Vue.js with Sircl is mainly to support the ability to render JSON with a template. That is what the Sircl extension for Vue.js is about.

With the above described setup in place, you can now render JSON using a template inside Sircl-based sites.

The JSON data is always expected to come from a web request which is retrieved with the Sircl vue-dataurl attribute mentioning the URL the retrieve the JSON from.

Without further notice, the element holding the vue-dataurl attribute is expected to contain the template that is to be rendered in place. For instance:

<div vue-dataurl="/MyTodos">
  <ul>
    <li v-for="item in items">{{ item.caption }}</li>
  </ul>
</div>

The v-for attribute and the moustache notation ({{ and }}) are part of the Vue.js template syntax. Find more about the Vue.js template syntax in the Vue.js documenation:

> Vue.js | Template Syntax

Alternative template locations

One backdraw of the above example is that the template is visible i it's unprocessed form while the data is being loaded.

To avoid this, you can have the template located elsewhere in the page, for instance in an appropriate TEMPLATE element. The template is then referred by, by means of a vue-template attribute holding a (relative or absolute) CSS selector to the template. I.e:

<div vue-dataurl="/MyTodos" vue-template="#todoListTmpl">
  <i>Your tasks are being loaded...</i>
</div>
...
<template id="todoListTmpl">
  <ul>
    <li v-for="item in items">{{ item.caption }}</li>
  </ul>
</template>

It is not mandatory to use the TEMPLATE element here, any element will do. But make sure to mark the element hidden if it is an element that would otherwise be visible.

If the template is stored somewhere (i.e. to make them reusable), you can also refer to the template by means of an URL using the vue-templateurl attribute in Sircl:

<div vue-dataurl="/MyTodos" vue-templateurl="/Templates/TodoListTmpl">
  <i>Your tasks are being loaded...</i>
</div>

The /Templates/TodoList/Tmpl resource should now be the template content itself.

Advanced Setup

When using the Sircl Vue.js integration, it is Sircl that is responsible for setting up and configuring Vue.js. This set-up may not match more complex application integration requirements. 

Bear in mind that the Sircl Vue.js integration is meant only for simple cases where JSON is to be rendered inside a Sircl site. For more complex Vue.js / Sircl integrations it might be better to set-up Vue.js first, and then integrate Sircl into it.

Also note that the Sircl Vue.js integration mounts and dismounts a Vue.js application for the appearance and disappearance of an element holding a vue-dataurl attribute.

That being said, Sircl offers three interception points where you can add JavaScript code to execute:

<script>
  sircl.vue.createHandlers.push(function (el, rootComponent) {
    console.log("Vue: Creating", el, appObj);
  });
  sircl.vue.mountHandlers.push(function (el, app) {
    console.log("Vue: Mounting", el, app);
  });
  sircl.vue.unmountHandlers.push(function (el, app) {
    console.log("Vue: Unmounting", el, app);
  });
</script>