Adapt styling

Author: DCzajkowski

src/App.vue

@@ -1,46 +1,49 @@
 <template>
-<Lightbox
+  <Lightbox
     class="lb-demo"
     :thumbnail="thumbnail"
     :images="images"
->
+  >
     <LightboxDefaultLoader slot="loader" />
     <div slot="content" slot-scope="{ url }">
-        <iframe
-            v-if="url.includes('youtube') || url.includes('youtu.be')"
-            :src="url"
-            frameborder="0"
-            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen
-            style="width: 100%; height: 90vh;"
-        />
-        <img v-else :src="url">
+      <iframe
+        v-if="url.includes('youtube') || url.includes('youtu.be')"
+        :src="url"
+        frameborder="0"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+        style="width: 100%; height: 90vh;"
+      />
+      <img v-else :src="url">
     </div>
-</Lightbox>
+  </Lightbox>
 </template>
 
 <script>
-import Lightbox, { LightboxDefaultLoader } from './Components/Lightbox.vue'
+  import Lightbox, { LightboxDefaultLoader } from './Components/Lightbox.vue'
 
-export default {
-    components: { Lightbox, LightboxDefaultLoader, },
+  export default {
+    components: {
+      Lightbox,
+      LightboxDefaultLoader,
+    },
     data() {
-        return {
-            thumbnail: "http://placekitten.com/g/100/100",
-            images: [
-                "http://placekitten.com/g/200/300",
-                "http://placekitten.com/g/600/400",
-                "https://bit.ly/2r8tNLH",
-                "https://www.youtube.com/watch?v=Z4j5rJQMdOU",
-            ]
-        }
+      return {
+        thumbnail: "http://placekitten.com/g/100/100",
+        images: [
+          "http://placekitten.com/g/200/300",
+          "http://placekitten.com/g/600/400",
+          "https://bit.ly/2r8tNLH",
+          "https://www.youtube.com/watch?v=Z4j5rJQMdOU",
+        ]
+      }
     }
-}
+  }
 </script>
 
-<style>
-.lb-demo {
+<style scoped>
+  .lb-demo {
     height: 100px;
     width: 100px;
-}
-</style>
+  }
+</style>

src/Components/Lightbox.vue

@@ -46,7 +46,6 @@
 
 <script>
   import Vue from 'vue'
-
   import LightboxDefaultLoader from './LightboxDefaultLoader.vue'
   export { LightboxDefaultLoader }
 
@@ -67,7 +66,9 @@
         default: false,
       },
     },
-    components: { LightboxDefaultLoader, },
+    components: {
+      LightboxDefaultLoader,
+    },
     data() {
       return {
         visible: this.value,

src/main.js

@@ -1,8 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 
-
 new Vue({
   el: '#app',
   render: (h) => h(App),
-})
+})