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

TL;DR

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.

When to use

You are seeing this: 2. imgix.js is DOM-scan based, so it misses elements rendered by Vue after init. Use this skill when you run into "imgix.js ix-path attributes ignored in Vue.js apps (use the official Vue library)".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Steps

1. 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.
2. 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.
3. 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.

Why this happens

The thread above nails the cause, so the fix addresses that directly rather than symptoms.

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