feat: support modifiers prop for components (#154)

nuxt · Jan 25, 2021 · 6fe9e8f · 6fe9e8f
1 parent 63aaa8a
commit 6fe9e8f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/runtime/components/nuxt-img.vue b/src/runtime/components/nuxt-img.vue
@@ -29,6 +29,7 @@ export default {
     quality: { type: [Number, String], required: false, default: undefined },
     background: { type: String, required: false, default: undefined },
     fit: { type: String, required: false, default: undefined },
+    modifiers: { type: Object, required: false, default: undefined },
 
     // options
     preset: { type: String, required: false, default: undefined },
@@ -50,11 +51,12 @@ export default {
       return this.$img(this.src, {
         provider: this.provider,
         preset: this.preset,
-        modifiers: this.modifiers
+        modifiers: this.nModifiers
       }).url
     },
-    modifiers () {
+    nModifiers () {
       return {
+        ...this.modifiers,
         width: this.width,
         height: this.height,
         format: this.format,

diff --git a/src/runtime/components/nuxt-picture.vue b/src/runtime/components/nuxt-picture.vue
@@ -63,6 +63,7 @@ export default {
     quality: { type: [Number, String], required: false, default: undefined },
     background: { type: String, required: false, default: undefined },
     fit: { type: String, required: false, default: undefined },
+    modifiers: { type: Object, required: false, default: undefined },
 
     // options
     preset: { type: String, required: false, default: undefined },
@@ -122,8 +123,9 @@ export default {
       }
       return formats[this.nFormat] || this.originalFormat
     },
-    modifiers () {
+    nModifiers () {
       return {
+        ...this.modifiers,
         format: this.format,
         quality: this.quality,
         background: this.background,
@@ -194,7 +196,10 @@ export default {
           sizes: this.sizes,
           width: this.nWidth,
           height: this.nHeight,
-          modifiers: { ...this.modifiers, format }
+          modifiers: {
+            ...this.nModifiers,
+            format
+          }
         })
 
         return {