Vue3

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-dist/
+dist/
+*.lock

package.json

@@ -1,13 +1,20 @@
 {
   "name": "@teamnovu/vue-cloudinary-image-statamic",
-  "version": "0.1.1",
+  "version": "1.0.4",
   "description": "Statamic Adapter for @teamnovu/vue-cloudinary-image and @teamnovu/nuxt-cloudinary-image",
   "repository": "teamnovu/vue-cloudinary-image-statamic",
   "license": "MIT",
-  "main": "dist/cloudinary-image-statamic.ssr.js",
+  "main": "dist/cloudinary-image-statamic.esm.js",
   "browser": "dist/cloudinary-image-statamic.esm.js",
   "module": "dist/cloudinary-image-statamic.esm.js",
   "unpkg": "dist/cloudinary-image-statamic.min.js",
+  "exports": {
+    ".": {
+      "import": "./dist/cloudinary-image-statamic.esm.js",
+      "require": "./dist/cloudinary-image-statamic.ssr.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "dist/*",
     "src/**/*.vue"
@@ -30,7 +37,7 @@
     "@rollup/plugin-alias": "^2.2.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-replace": "^2.3.2",
-    "@teamnovu/vue-cloudinary-image": "0.0.11",
+    "@teamnovu/vue-cloudinary-image": "2.0.0",
     "@vue/cli-plugin-babel": "^4.3.1",
     "@vue/cli-plugin-eslint": "^4.5.9",
     "@vue/cli-service": "^4.3.1",
@@ -48,18 +55,18 @@
     "rollup": "^2.7.3",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-vue": "^5.1.6",
+    "rollup-plugin-vue": "^6.0.0",
     "standard-version": "latest",
-    "vue": "^2.6.11",
+    "vue": "^3.2.45",
     "vue-template-compiler": "^2.6.11"
   },
   "peerDependencies": {
-    "vue": "^2.6.11"
+    "vue": "^3.2.45"
   },
   "publishConfig": {
     "access": "public"
   },
   "engines": {
     "node": ">=10"
   }
-}
+}

src/AppImage.vue

@@ -62,11 +62,7 @@ export default {
     },
 
     assetAlt () {
-      if (this.alt) {
-        return this.alt
-      }
-
-      return this.asset.alt
+      return this.alt || this.asset.alt || ''
     },
 
     imageFocus () {
@@ -129,7 +125,7 @@ export default {
 
       return undefined
     },
-    imageAspectRatio() {
+    imageAspectRatio () {
       if (this.aspectRatio) {
         return this.aspectRatio
       }

src/entry.js

@@ -1,41 +1,8 @@
 // Import vue component
 import component from '@/AppImage.vue'
 
-// install function executed by Vue.use()
-const install = function installAppImageStatamic (Vue, options) {
-  if (install.installed) return
-  install.installed = true
-
-  Vue.component('AppImage', component)
-}
-
-// Create module definition for Vue.use()
-const plugin = {
-  install,
-}
-
-// To auto-install on non-es builds, when vue is found
-// eslint-disable-next-line no-redeclare
-/* global window, global */
-if (process.env.ES_BUILD === 'false') {
-  let GlobalVue = null
-  if (typeof window !== 'undefined') {
-    GlobalVue = window.Vue
-  } else if (typeof global !== 'undefined') {
-    GlobalVue = global.Vue
-  }
-  if (GlobalVue) {
-    GlobalVue.use(plugin)
-  }
+export default {
+  install: (app, options) => {
+    app.component('AppImage', component)
+  },
 }
-
-// Inject install function into component - allows component
-// to be registered via Vue.use() as well as Vue.component()
-component.install = install
-
-// Export component by default
-export default component
-
-// It's possible to expose named exports when writing components that can
-// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
-// export const RollupDemoDirective = component;