From 3c3d626d5cbee730a5407fb6533425c028d0c913 Mon Sep 17 00:00:00 2001
From: Luis Ball <lball@imgix.com>
Date: Fri, 2 Jul 2021 11:54:11 -0700
Subject: [PATCH] feat: use vue 3 global and composition api in ix-picture

---
 src/plugins/vue-imgix/ix-picture.tsx | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/plugins/vue-imgix/ix-picture.tsx b/src/plugins/vue-imgix/ix-picture.tsx
index 3afb4b11..93915917 100644
--- a/src/plugins/vue-imgix/ix-picture.tsx
+++ b/src/plugins/vue-imgix/ix-picture.tsx
@@ -1,21 +1,15 @@
 import { ensureVueImgixClientSingleton, IVueImgixClient } from './vue-imgix';
-import Vue, { CreateElement } from 'vue';
-import Component from 'vue-class-component';
+import { defineComponent, h } from 'vue';
 
-const IxPictureProps = Vue.extend({
+const IxPictureProps = defineComponent({
   props: {},
 });
 
-@Component
-export class IxPicture extends IxPictureProps {
-  // Using !: here because we ensure it is set in created()
-  private vueImgixSingleton!: IVueImgixClient;
+export const IxPicture = defineComponent({
+  mixins: [IxPictureProps],
+  render() {
+    const vueImgixSingleton: IVueImgixClient = ensureVueImgixClientSingleton();
 
-  created() {
-    this.vueImgixSingleton = ensureVueImgixClientSingleton();
-  }
-
-  render(createElement: CreateElement) {
-    return createElement('picture', this.$slots.default);
-  }
-}
+    return h('picture', this.$slots.default);
+  },
+});