Improvements

.eslintignore

@@ -0,0 +1,2 @@
+examples/
+coverage/

.eslintrc.js

@@ -0,0 +1,32 @@
+// https://prettier.io/docs/en/integrating-with-linters.html
+// https://vuejs.github.io/vetur/linting-error.html#linting
+// https://github.com/vuejs/eslint-plugin-vue/blob/v6.2.2/docs/user-guide/README.md
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/recommended",
+        "plugin:prettier/recommended"
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue"
+    ],
+    "rules": {
+        // override/add rules settings here, such as:
+        // 'vue/no-unused-vars': 'error'
+        "vue/html-self-closing": "off",
+        "vue/require-default-prop": "off" // does not work well with prop types
+    }
+};

.gitignore

@@ -1,8 +1,9 @@
+.vscode/
 coverage
 node_modules
 dist
 examples/basic/node_modules
 examples/basic/dist
 examples/with-nuxt/node_modules
 examples/with-nuxt/dist
-examples/with-nuxt/.nuxt
+examples/with-nuxt/.nuxt

.nvmrc

@@ -0,0 +1 @@
+lts/erbium

.prettierignore

@@ -0,0 +1,2 @@
+examples/
+coverage/

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "all"
+}

README.md

@@ -163,6 +163,7 @@ export default {
 | intersection-treshold | float                    | 0                 | :x:                | Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible. |
 | intersection-tmargin  | string                   | "0px 0px 0px 0px" | :x:                | Margin around the placeholder. Can have values similar to the CSS margin property (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the placeholder element's bounding box before computing intersections.                  |
 | lazy-load             | Boolean                  | true              | :x:                | Wheter enable lazy loading or not                                                                                                                                                                                                                                                             |
+| explicitWidth         | Boolean                  | false             | :x:                | Wheter the image wrapper should explicitely declare the width of the image or keep it fluid                                                                                                                                                                                                   |
 
 #### The `ResponsiveImage` object
 

babel.config.js

@@ -1,13 +1,13 @@
 module.exports = {
   presets: [
-    '@vue/babel-preset-jsx',
+    "@vue/babel-preset-jsx",
     [
-      '@babel/preset-env',
+      "@babel/preset-env",
       {
         targets: {
-          node: 'current',
+          node: "current",
         },
       },
     ],
   ],
-};
+};

build/rollup.config.js

@@ -7,15 +7,15 @@ export default {
     file: "bundle.js",
     name: "VueDatoCms",
     globals: {
-      "@znck/prop-types": "PropTypes"
-    }
+      "@znck/prop-types": "PropTypes",
+    },
   },
   external: ["@znck/prop-types"],
   plugins: [
     babel({
       exclude: "node_modules/**",
-      runtimeHelpers: true
+      runtimeHelpers: true,
     }),
-    commonjs()
-  ]
+    commonjs(),
+  ],
 };

examples/basic/package.json

@@ -11,7 +11,7 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
-    "vue-datocms": "../..",
+    "vue-datocms": "file:../..",
     "vue-meta": "^2.3.3"
   },
   "devDependencies": {