Cleaned up vuejs components and added image-picker deafult image

 <template>
     <div id="image-manager">
-        <div class="overlay" v-el:overlay v-on:click="overlayClick">
+        <div class="overlay" v-el:overlay @click="overlayClick">
             <div class="image-manager-body">
                 <div class="image-manager-content">
                     <div class="image-manager-list">
@@ -8,13 +8,13 @@
                             <img class="anim fadeIn"
                                  :class="{selected: (image==selectedImage)}"
                                  :src="image.thumbnail" :alt="image.title" :title="image.name"
-                                 v-on:click="imageClick(image)"
-                                 v-bind:style="{animationDelay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'}">
+                                 @click="imageClick(image)"
+                                 :style="{animationDelay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'}">
                         </div>
-                        <div class="load-more" v-show="hasMore" v-on:click="fetchData">Load More</div>
+                        <div class="load-more" v-show="hasMore" @click="fetchData">Load More</div>
                     </div>
                 </div>
-                <button class="neg button image-manager-close" v-on:click="hide">x</button>
+                <button class="neg button image-manager-close" @click="hide">x</button>
                 <div class="image-manager-sidebar">
                     <h2 v-el:image-title>Images</h2>
                     <hr class="even">
@@ -23,7 +23,7 @@
                     </div>
                     <div class="image-manager-details anim fadeIn" v-show="selectedImage">
                         <hr class="even">
-                        <form v-on:submit="saveImageDetails" v-el:image-form>
+                        <form @submit="saveImageDetails" v-el:image-form>
                             <div class="form-group">
                                 <label for="name">Image Name</label>
                                 <input type="text" id="name" name="name" v-model="selectedImage.name">
@@ -42,12 +42,12 @@
                             </ul>
                         </div>
 
-                        <form v-on:submit="deleteImage" v-el:image-delete-form>
+                        <form @submit="deleteImage" v-el:image-delete-form>
                             <button class="button neg"><i class="zmdi zmdi-delete"></i>Delete Image</button>
                         </form>
                     </div>
                     <div class="image-manager-bottom">
-                        <button class="button pos anim fadeIn" v-show="selectedImage" v-on:click="selectButtonClick"><i
+                        <button class="button pos anim fadeIn" v-show="selectedImage" @click="selectButtonClick"><i
                                 class="zmdi zmdi-square-right"></i>Select Image
                         </button>
                     </div>

@@ -3,17 +3,18 @@
     <div class="image-picker">
         <div>
             <img v-if="image && image !== 'none'" :src="image" :class="imageClass" alt="Image Preview">
+            <img v-if="image === '' && defaultImage" :src="defaultImage" :class="imageClass" alt="Image Preview">
         </div>
-        <button class="button" type="button" v-on:click="showImageManager">Select Image</button>
+        <button class="button" type="button" @click="showImageManager">Select Image</button>
         <br>
-        <button class="text-button" v-on:click="reset" type="button">Reset</button> <span class="sep">|</span> <button class="text-button neg" v-on:click="remove" type="button">Remove</button>
+        <button class="text-button" @click="reset" type="button">Reset</button> <span class="sep">|</span> <button class="text-button neg" v-on:click="remove" type="button">Remove</button>
         <input type="hidden" :name="name" :id="name" v-model="image">
     </div>
 </template>
 
 <script>
     module.exports = {
-        props: ['currentImage', 'name', 'imageClass'],
+        props: ['currentImage', 'name', 'imageClass', 'defaultImage'],
         data: function() {
             return {
                 image: this.currentImage

 
 <template>
-    <div class="toggle-switch" v-on:click="switch" :class="{'active': isActive}">
+    <div class="toggle-switch" @click="switch" :class="{'active': isActive}">
         <input type="hidden" :name="name" :value="value"/>
         <div class="switch-handle"></div>
     </div>

@@ -44,6 +44,8 @@
   }
   table {
     word-break: break-all;
+    word-break: break-word;
+    hyphens: auto;
   }
 }
 

@@ -28,7 +28,7 @@
                 <div class="form-group" id="logo-control">
                     <label for="setting-app-logo">Application Logo</label>
                     <p class="small">This image should be 43px in height. </p>
-                    <image-picker current-image="{{ Setting::get('app-logo', '') }}" name="setting-app-logo" image-class="logo-image"></image-picker>
+                    <image-picker current-image="{{ Setting::get('app-logo', '') }}" default-image="/logo.png" name="setting-app-logo" image-class="logo-image"></image-picker>
                 </div>
             </div>
         </div>