Using vueJS in plone

Hi

What is the way to get vueJS working in plone ?
I used a short-cut approach of referring to vueJS.js file from the "static" directory. On using the VueJS specific tags in the "browser:page" template expected errors are seen as it is not quite PageTemplate

Traceback (innermost last):
Module ZPublisher.WSGIPublisher, line 156, in transaction_pubevents
Module ZPublisher.WSGIPublisher, line 338, in publish_module
Module ZPublisher.WSGIPublisher, line 256, in publish
Module ZPublisher.mapply, line 85, in mapply
Module ZPublisher.WSGIPublisher, line 62, in call_object
Module zope.browserpage.simpleviewclass, line 41, in call
Module Products.Five.browser.pagetemplatefile, line 126, in call
Module Products.Five.browser.pagetemplatefile, line 61, in call
Module zope.pagetemplate.pagetemplate, line 129, in pt_render

  • Warning: Compilation failed
  • Warning: builtins.KeyError: 'Undefined namespace prefix: v-bind.'
    zope.pagetemplate.pagetemplate.PTRuntimeError: ['Compilation failed', "builtins.KeyError: 'Undefined namespace prefix: v-bind.'"]

The vueJS app code is

Vue.component('blog-post', {
props: ['title'],
template: '

{{ title }}

'
})

new Vue({
el: '#blog-post-demo',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
],
temp: "GGGGGGGGGGGGG"
}
})

browser:page refers to this template

BLOG-POST-DEMO

<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"

I assume you need to define v-bind as namespace in the head of your template file in the same way as this is need for tal: namespace for example.

Plone Foundation Code of Conduct