Vue 3 Support

[luqven]

Vue 3 support status: beta - expect bugs ⚠️ 🐛

Vue 3 support is currently under development in the next branch.

Usage

You can try out the beta release under the @next channel

yarn add vue-imgix@next

You can also try the beta release on these sandboxes:

• Vue 3 - CodeSandbox
• Nuxt 3 Beta - Stackblitz

Remaining work

This is a non-exhaustive list of tasks that remain to move away from an beta release. This list is subject to change.

Contributions/Pull requests are welcome for any task that hasn't already been assigned to someone.

Done

• remove vue-class-component dependency
• add @vue/migration build as dependency
• update vue to vue 3.x
• re-write plugin registration using new global API
• address all migration build warnings
• re-write components using new global and composition APIs
• bring in absolute src URL from v2.9.0

To Do

These must get done before transitioning away from an beta release

• update vue-cli plugins (3 / 6) - Assigned to @luqven
• update README.md
  • update Nuxt installation
  • update Nuxt usage
• look at testing to see if removed tests can be re-added: 78ce8cf

Someday

These are nice to have that will not necessarily get done for Vue 3 migration

• use Vite instead of webpack
• remove vue-cli dependencies
• use refs to share domains between components
• use refs to share imgix params between components

Known issues

• [[Vue warn]: Failed to resolve component: ix-img](Vue 3 Support #410 (comment))

---

Suggestions

For those of you currently utilizing the @next beta release, please leave your feedback and suggestions if you have any in the comments.

Related reading
🐙 GitHub Issue tracking core vue 3 repositories statuses: vuejs/awesome-vue#3544 (comment)

[AndersNielsen85]

Hi, thanks for getting started on vue3 support.

For Nuxt3 (uses vue3) the docs needs an update

import { defineNuxtPlugin } from '#app'
import VueImgix from 'vue-imgix';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueImgix, {
    domain: "<your company's imgix domain>",,
    defaultIxParams: {
      auto: 'format',
    },
  })
})

Nuxt3 will autoload the plugin, so there is no need for the step 2 anymore.

Also if the "declare module 'vue-imgix'" could be somehow added to the code it would be really nice as nuxt3 now uses typescript out of the box.

[AndersNielsen85]

For Nuxt3 I am experiencing warnings

[Vue warn]: Failed to resolve component: ix-img
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Invalid value used as weak map key
  at WeakMap.set (<anonymous>)  
  at normalizePropsOptions (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2689:11)  
  at createComponentInstance (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6115:23)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:197:22)  
  at Module.ssrRenderComponent (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:623:12)  
  at file://./.nuxt/dist/server/server.mjs:2908:33  
  at Module.ssrRenderList (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:920:13)  
  at _sfc_ssrRender (file://./.nuxt/dist/server/server.mjs:2906:25)  
  at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:263:13)  
  at ./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:211:29
[Vue warn]: Failed to resolve component: ix-img
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Invalid value used as weak map key
  at WeakMap.set (<anonymous>)  
  at normalizePropsOptions (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2689:11)  
  at createComponentInstance (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6115:23)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:197:22)  
  at Module.ssrRenderComponent (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:623:12)  
  at file://./.nuxt/dist/server/server.mjs:2908:33  
  at Module.ssrRenderList (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:920:13)  
  at _sfc_ssrRender (file://./.nuxt/dist/server/server.mjs:2906:25)  
  at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:263:13)  
  at ./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:211:29

The result is that sometimes the page crashes.

The ix-picture seems to cause the page to crash consistently when trying to use it with Nuxt3.

Nuxt3 does use Vite as standard now, so it might be related to that.
I think that out of the 4 somedays Vite would be the best as this really speeds up things for developers :)

[luqven]

Hey @AndersNielsen85, thanks for reporting this issue. I’ve created a ticket for v3 nuxt support and will get back to you after we discuss how to move forward with this internally.

[productdevbook]

I hope it comes out soon. Thank you

[productdevbook]

feature add please: sizes="xs:320px sm:600px" example config global add

 screens: {
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      xxl: 1536,
      '2xl': 1536
    },

cc: https://image.nuxtjs.org/api/options

[frederickfogerty]

Hi @AndersNielsen85, just wanted to follow up here to say that we're still discussing how to move forward on this internally. Currently we are very busy with wrapping up some other projects before the end of the year, as you can understand. Therefore at this stage we can't commit to a timeline for Vue 3 support. But, as always, we are welcome to any contributions - so if you feel like helping out with this upgrade (it seems you already have quite a lot of knowledge in this area), we will commit to quickly and efficiently reviewing PRs and providing feedback. Thanks!

[luqven]

Hey @AndersNielsen85 👋🏼

I wanted to let you know v2.9.0-rc.2 should fix the crashes with the ix-picture. You can see a quick illustration of 2.9.0-rc.2 working with ix-img and ix-picture at this stackblitz.

If you have the chance, update your version and let me know how it goes. As far as the docs update suggestion, I definitely encourage you to open a PR to update our Nuxt docs on the next branch.

Thanks again for taking the time to provide feedback on the next build and please let us know if there's anything else that comes up.

[luqven]

About the [Vue warn]: Failed to resolve component: ix-img warning

By default, Vue will attempt to resolve a non-native HTML tag as a registered Vue component before falling back to rendering it as a custom element. This will cause Vue to emit a "failed to resolve component" warning during development - Vue docs

It doesn't seem to be impeding the functionality of the plugin, but we are continuing to work on removing that warning.

I have a strong inclination that this warning is a result of a breaking change in the Vue custom elements API. The Nuxt 3 configuration docs don't make it very clear how you're supposed to set the Vue compilerOptions, but this issue has a useful example.

// nuxt.config.js
import { defineNuxtConfig } from 'nuxt3';

export default defineNuxtConfig({
  build: {
    transpile: ['vue-imgix'],
  },
  vue: {
    compilerOptions: {
      // treat any tag that starts with `ix-` as a custom element
      isCustomElement: (tag) => tag.startsWith('ix-'),
    },
  },
});

Sure enough, this gets rid of the warning but it also has the unfortunate side effect of causing the entire app to crash. At this point I can only guess that's because slots support in custom elements is iffy. We're still investigating.

[AndersNielsen85]

Hey @luqven
I finally got around to test this a bit.

It does indeed work now (with the warning).

I tried to dig a big, and it seems others are having issues with components originating from plugins as well.
https://github.com/nuxt/framework/discussions/1183

[luqven]

Hey @luqven

I finally got around to test this a bit.

It does indeed work now (with the warning).

I tried to dig a big, and it seems others are having issues with components originating from plugins as well.

https://github.com/nuxt/framework/discussions/1183

Glad to hear things are working (with warnings) 😊.

I'll be sure to take a look at that issue, thanks for linking it.

[productdevbook]

ts problem v3 beta version

[frederickfogerty]

@productdevbook can you elaborate a little bit more about what the specific issue is that you're facing here?

[frederickfogerty]

For anyone that is following this thread, we have successfully been able to upgrade this project to work successfully in Vue 3 and Nuxt 3. This version is currently available on the @next dist-tag on npm.

[productdevbook]

@productdevbook can you elaborate a little bit more about what the specific issue is that you're facing here?

There are no ts arguments, it gives a ts warning.

[frederickfogerty]

Vue 3 support has been released in @imgix/vue@3 🎉 Thanks to everyone who contributed to this release, and helped test it! You can install Vue 3 support with:

yarn add @imgix/vue@3

or

npm install --save @imgix/vue@3

[mdunbavan]

Hey, just wanted to double check if there was any movement or idea on vite support? I see there is a PR that has been created for it. Has this been looked at and can it be merged?

[luqven]

Hey, just wanted to double check if there was any movement or idea on vite support? I see there is a PR that has been created for it. Has this been looked at and can it be merged?

Hey @mdunbavan we don't currently have plans to tackle Vite support. Is Vite support mission critical for your use case?

Regardless, I encourage you to open a feature request issue for Vite support. This way we can better gage community interest and prioritize that work.

If lack of Vite support is impeding your ability to use imgix, email [email protected] and let them know. They'll do their best to unblock you. It also helps us prioritize the work.