How do I use custom properties that include a colon (like <div :data="data">) in Visualforce?

Question

Many Vue libraries include components that use colons to signify properties, like Buefy's table syntax:

<div v-cloak="true" v-if="MyJSONData != null">
     <b-table
            :data="data"
            :paginated="isPaginated"
            :per-page="perPage"
            :current-page.sync="currentPage"
            :pagination-simple="isPaginationSimple"
            :default-sort-direction="defaultSortDirection"
            default-sort="user.first_name"
            aria-next-label="Next page"
            aria-previous-label="Previous page"
            aria-page-label="Page"
            aria-current-label="Current page">
    </b-table>
</div>

Visualforce isn't happy with this syntax and doesn't let me save my code, throwing a generic parsing error:

Error Parsing /apex/MyClass: Error Traced[line: 20] Attribute name "v-if" associated with an element type "b-table" must be followed by the ' = ' character.

Is there a way I can encourage Visualforce to play nicely with these custom properties/attributes?

Answer 1

First, in vue, the colon syntax is short for v-bind. So instead of :per-page you can use v-bind:per-page.

Second, Visualforce's XML parser will interpret v-bind as a namespace, so you need to ensure that namespace is defined on some parent element. For example you can wrap your entire content in an enclosing div: <div xmlns:v-bind="http://vue.org"> (content goes here) </div>

And that will allow you to use v-bind.