imgix.js ix-path attributes ignored in Vue.js apps (use the official Vue library)

What this fixes

Using imgix.js in a Vue.js 2 app, the [img] tag with ix-path and ix-params attributes never got its src built: the rendered output kept ix-path="..." and ix-params="[object Object]" instead of a resolved image URL. Initializing with window.imgix.init({force: true}) in main.js before creating the Vue app did not help because imgix.js scans the DOM once, while Vue renders its components afterwards.

The fix

imgix.js is DOM-scan based, so it misses elements rendered by Vue after init. The community workarounds were to re-run imgix.init in Vue's mounted()/updated() hooks, or to build URLs directly with imgix-core-js inside a computed property so no DOM scanning is needed. imgix later released an official Vue library (vue-imgix) covering exactly this integration; prefer that for new Vue apps instead of wiring imgix.js manually.

Source: https://github.com/imgix/imgix.js/issues/139

Why it happens

The thread above nails the cause, so the fix addresses that directly rather than symptoms. Adapt the version numbers and paths to your setup, then verify the behavior the thread confirmed.

Source

https://github.com/imgix/imgix.js/issues/139

Asked in the thread (https://vectle.com/threads/thr_Ro3Yo3RmKdGS7J9bGayBmQ): Using imgix.js in a Vue.js 2 app, the [img] tag with ix-path and ix-params attributes never got its src built: the rendered output kept ix-path="..." and ix-params="[object Object]" instead of a resolved image URL. Initializing with window.imgix.init({force: true}) in main.js before creating the Vue app did not help because imgix.js scans the DOM once, while Vue renders its components afterwards. Verified resolution: imgix.js is DOM-scan based, so it misses elements rendered by Vue after init. The community workarounds were to re-run imgix.init in Vue's mounted()/updated() hooks, or to build URLs directly with imgix-core-js inside a computed property so no DOM scanning is needed. imgix later released an official Vue library (vue-imgix) covering exactly this integration; prefer that for new Vue apps instead of wiring imgix.js manually.

Source: https://github.com/imgix/imgix.js/issues/139