Added gh-pages

package.json

@@ -8,7 +8,8 @@
     "lint": "vue-cli-service lint --no-fix",
     "test": "npm run lint && vue-cli-service test:unit",
     "coverage": "npm test && codecov",
-    "prepublish": "npm run build"
+    "prepublish": "npm run build",
+    "gh-pages": "vue-cli-service build && gh-pages -d dist"
   },
   "license": "MIT",
   "author": "Chameleon Team <[email protected]>",
@@ -36,6 +37,7 @@
     "codecov": "^3.5.0",
     "eslint-plugin-jest": "^22.6.4",
     "eslint-plugin-vue": "^5.2.2",
+    "gh-pages": "^2.0.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "vue-template-compiler": "^2.6.10",

src/App.vue

@@ -1,9 +1,18 @@
 <template>
   <v-app id="app">
-    <VColorPickerInput v-model="color"
-                       return-type="value"
-                       @change="showColor">
-    </VColorPickerInput>
+    <v-content>
+      <v-container>
+        <h1>vuetify-colorizer</h1>
+        <p>
+          This is an example of the vuetify-colorizer:
+        </p>
+        <br>
+        <VColorPickerInput v-model="color"
+                           return-type="value"
+                           @change="showColor">
+        </VColorPickerInput>
+      </v-container>
+    </v-content>
   </v-app>
 </template>
 
@@ -35,9 +44,9 @@ export default {
 </script>
 
 <style>
-#app {
-  font-family: Roboto, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+  #app {
+    font-family: Roboto, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 </style>

src/components/VColorPickerInput.vue

@@ -162,6 +162,7 @@ export default {
 
 <style lang="stylus">
 .colorizer-picker-input {
+  position: relative;
   .v-input__append-inner {
     margin-top: 0px !important;
     position: relative;

vue.config.js

@@ -14,4 +14,8 @@ module.exports = {
     },
     plugins,
   },
+  publicPath: process.env.NODE_ENV === 'production'
+    ? '/vuetify-colorizer' // prod
+    : '/', // dev
+
 };