Using v-lazy directive error

[schellenbergk]

After adding vue-lazyload and in main.js:

import VueLazyload from "vue-lazyload";
...
Vue.use(VueLazyload);

then as soon as you add <img v-lazy="... in any template, it causes an error in the console:

Failed to generate render function:

SyntaxError: Unexpected token '}' in ....

Should v-lazy directive be somehow added as global directive under src/vue/directives ?

[sergejcodes]

Not sure what is causing the issue with this particular npm package, but if you don't mind using another one:

v-lazy-image should work with the latest Theme Lab release.

Here's a basic example:

<v-lazy-image
  src="{{ 'test.static.png' | asset_img_url }}"
  src-placeholder="{{ 'test.static.png' | asset_img_url: '50x' }}"
></v-lazy-image>

and some more inside the Foundation Theme

[sergejcodes]

vue-lazyload isn't compatible with Theme Lab v3 anymore, since Vue 3 is now in use and vue-lazyload only supports Vue 1 and 2.