nathanhipps
diff --git a/Diff for: ‎.gitignore
+3-1 b/Diff for: ‎.gitignore
+3-1
diff --git a/Diff for: ‎_config.yml
-1 b/Diff for: ‎_config.yml
-1
diff --git a/Diff for: ‎example/src/app.js
+18 b/Diff for: ‎example/src/app.js
+18
diff --git a/Diff for: ‎example/src/index.html
+51 b/Diff for: ‎example/src/index.html
+51
diff --git a/Diff for: ‎package.json
+11-5 b/Diff for: ‎package.json
+11-5
diff --git a/Diff for: ‎src/VueGoogleAutocomplete.vue
+2-2 b/Diff for: ‎src/VueGoogleAutocomplete.vue
+2-2
@@ -1,2 +1,4 @@
 .DS_Store
-node_modules
+node_modules
+mix-manifest.json
+example/dist
@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import VueGoogleAutocomplete from './../../src/VueGoogleAutocomplete.vue';
+
+const app = new Vue({
+    el: '#app',
+
+    components: { VueGoogleAutocomplete },
+
+    data: {
+        address: '' 
+    },
+
+    methods: {
+        getAddressData: function (addressData) {
+            this.address = addressData;
+        }
+    }
+});
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" />
+
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCe1exctmeJjIb4guyT6newSpyJ7kA3aLc&libraries=places"></script>
+</head>
+<body>
+<section class="hero is-medium is-primary is-bold">
+    <div class="hero-body">
+        <div class="container">
+            <h1 class="title is-2">Vue Google Autocomplete</h1>
+            <h2 class="subtitle">A Vue.js autosuggest component for the Google Maps Places API</h2>
+        </div>
+    </div>
+</section>
+
+<section class="hero">
+    <div class="hero-body">
+        <div class="container" id="app">
+            <h3 class="title is-4">Start typing an address and below you will see found result</h3>
+            <p class="control">
+                <vue-google-autocomplete 
+                    id="map" 
+                    classname="input"
+                    placeholder="Start typing"
+                    v-on:placechanged="getAddressData"
+                >
+                </vue-google-autocomplete>
+            </p>
+
+            <div class="message is-success" v-show="address">
+                <div class="message-body">{{ address }}</div>
+            </div>
+        </div>
+    </div>
+</section>
+<footer class="footer">
+    <div class="container">
+        <div class="content">
+            <p>
+                <a href="https://github.com/olefirenko/vue-google-autocomplete">View project on GitHub</a>
+            </p>
+        </div>
+    </div>
+</footer>
+
+<script src="../dist/app.js"></script>
+
+</body>
+</html>
@@ -17,11 +17,17 @@
     "autocomplete"
   ],
   "scripts": {
-    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
+    "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules",
+    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
+    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "author": "Dmitriy Olefyrenko <[email protected]>",
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "gh-pages": "^0.12.0",
+    "laravel-mix": "^0.8.8",
+    "vue": "^2.2.1",
+    "webpack": "^2.2.1"
+  }
 }
@@ -1,6 +1,6 @@
 <template>
     <input 
-        :class="className" 
+        :class="classname" 
         :id="id" 
         :placeholder="placeholder" 
         @focus = "geolocate()"
@@ -17,7 +17,7 @@
             required: true
           },
 
-          className: String,
+          classname: String,
 
           placeholder: {
             type: String,