add options

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-picture-swipe",
-  "version": "0.1.7",
+  "version": "0.2.3",
   "description": "A Vue integration PhotoSwipe image plugin",
   "main": "src/main.js",
   "scripts": {
@@ -23,23 +23,24 @@
   "license": "MIT",
   "dependencies": {
     "photoswipe": "^4.1.2",
-    "vue": "^2.5.13"
+    "vue": "^2.5.16"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.3",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.6.1",
-    "cross-env": "^5.1.3",
-    "css-loader": "^0.28.10",
+    "cross-env": "^5.1.4",
+    "css-loader": "^0.28.11",
     "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-plugin-import": "^2.10.0",
+    "eslint-plugin-import": "^2.11.0",
     "file-loader": "^1.1.11",
-    "node-sass": "^4.7.2",
-    "sass-loader": "^6.0.6",
-    "vue-loader": "^14.1.1",
-    "vue-template-compiler": "^2.5.13",
-    "webpack": "^4.0.1",
-    "webpack-cli": "^2.0.10",
-    "webpack-dev-server": "^3.1.0"
+    "node-sass": "^4.9.0",
+    "sass-loader": "^6.0.7",
+    "style-loader": "^0.21.0",
+    "vue-loader": "^14.2.2",
+    "vue-template-compiler": "^2.5.16",
+    "webpack": "^4.6.0",
+    "webpack-cli": "^2.1.2",
+    "webpack-dev-server": "^3.1.3"
   }
 }

src/VuePictureSwipe.vue

@@ -78,12 +78,17 @@
           }
         ],
         type: Array
+      },
+      options: {
+        default: () => ({}),
+        type: Object
       }
     },
     data() {
       return {};
     },
     mounted() {
+      let that = this;
       let initPhotoSwipeFromDOM = function (gallerySelector) {
 
         // parse slide data (url, title, size ...) from DOM elements
@@ -266,7 +271,7 @@
           }
 
           // Pass data to PhotoSwipe and initialize it
-          gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
+          gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, Object.assign(options, that.options));
           gallery.init();
         };
 

webpack.config.js

@@ -10,6 +10,8 @@ module.exports = {
       { test: /\.js$/, use: 'babel-loader' },
       // use vue-loader for .vue files
       { test: /\.vue$/, use: 'vue-loader' },
+      { test: /\.css$/, loader: 'style-loader!css-loader' },
+      { test: /\.(gif|svg|jpg|png)$/, loader: 'file-loader' },
     ],
   },
   // default for pretty much every project