Upgrade to Vue 2

Author: cretueusebiu

.eslintrc

@@ -1,57 +1,11 @@
 {
-    "globals": {
-    },
-    "rules": {
-        "indent": [
-            2,
-            2
-        ],
-        "quotes": [
-            1,
-            "single"
-        ],
-        "linebreak-style": 0,
-        "no-console": 0,
-        "no-unused-vars": 1
-    },
-    "settings": {
-        "import/ignore": [
-        ]
-    },
-    "env": {
-        "es6": true,
-        "node": true,
-        "browser": true
-    },
-    "ecmaFeatures": {
-        "arrowFunctions": true,
-        "destructuring": true,
-        "classes": true,
-        "defaultParams": true,
-        "blockBindings": true,
-        "modules": true,
-        "objectLiteralComputedProperties": true,
-        "objectLiteralShorthandMethods": true,
-        "objectLiteralShorthandProperties": true,
-        "restParams": true,
-        "spread": true,
-        "forOf": true,
-        "generators": true,
-        "templateStrings": true,
-        "superInFunctions": true,
-        "experimentalObjectRestSpread": true
-    },
-    "parserOptions": {
-        "sourceType": "module",
-        "ecmaFeatures": {
-            "modules": true,
-            "sourceType": "module",
-            "spread": true,
-            "experimentalObjectRestSpread": true
-        }
-    },
-    "extends": "eslint:recommended",
-    "plugins": [
-        "html"
-    ]
+  "extends": "vue",
+  "parserOptions": {
+    "ecmaVersion": 8
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "browser": true
+  }
 }

CHANGELOG.md

@@ -0,0 +1,6 @@
+# Changelog
+
+## 0.2.0 - 2017-01-15
+
+- Upgraded to Vue 2.
+- Replaced [vue-resource](https://github.com/pagekit/vue-resource) with [axios](https://github.com/mzabriskie/axios).

README.md

@@ -16,8 +16,16 @@
     - Set `GCM_KEY` and `GCM_SENDER_ID` from [Google Console](https://console.cloud.google.com)
     - (optional) Set `PUSHER_APP_ID`, `PUSHER_KEY`, `PUSHER_SECRET` from [Pusher](https://pusher.com/)
 - `php artisan migrate`
-- (optional) `npm install && gulp`
+- (optional) `npm install && gulp` / `yarn && gulp`
 
-## Browser compatibility
+## Browser Compatibility
 
-The Push API currently works on Chrome and Firefox. Some features like the notification close event only works on Chrome. 
+The [Push API](https://developer.mozilla.org/en/docs/Web/API/Push_API) currently works on Chrome and Firefox. Some features like the notification close event only works on Chrome. 
+
+## Known Issues
+
+- If you use [Laravel Valet](https://github.com/laravel/valet) for your local development the service worker might not start because of the self signed certificate. At least that happened to me on Windows, so I had to use Apache.
+
+## Changelog
+
+Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.

composer.json

@@ -8,7 +8,7 @@
         "php": ">=5.6.4",
         "laravel/framework": "5.3.*",
         "laravel-notification-channels/webpush": "dev-master",
-        "pusher/pusher-php-server": "^2.4"
+        "pusher/pusher-php-server": "^2.6"
     },
     "require-dev": {
         "fzaninotto/faker": "~1.4",
@@ -47,8 +47,7 @@
         ]
     },
     "config": {
-        "preferred-install": "dist"
-    },
-    "minimum-stability": "dev",
-    "prefer-stable": true
+        "preferred-install": "dist",
+        "sort-packages": true
+    }
 }

gulpfile.js

@@ -1,19 +1,8 @@
-var elixir = require('laravel-elixir');
+const elixir = require('laravel-elixir')
 
-require('laravel-elixir-vue');
+require('laravel-elixir-vue-2')
 
-/*
- |--------------------------------------------------------------------------
- | Elixir Asset Management
- |--------------------------------------------------------------------------
- |
- | Elixir provides a clean, fluent API for defining some basic Gulp tasks
- | for your Laravel application. By default, we are compiling the Sass
- | file for our application, as well as publishing vendor resources.
- |
- */
-
-elixir(function(mix) {
-    mix.sass('app.scss')
-       .webpack('app.js');
-});
+elixir(mix => {
+  mix.sass('app.scss')
+    .webpack('app.js')
+})

package.json

@@ -2,21 +2,26 @@
   "private": true,
   "scripts": {
     "prod": "gulp --production",
-    "dev": "gulp watch"
+    "dev": "gulp watch --minimal"
   },
-  "devDependencies": {
+  "dependencies": {
+    "axios": "^0.15.3",
     "bootstrap-sass": "^3.3.7",
-    "gulp": "^3.9.1",
     "jquery": "^3.1.0",
-    "laravel-elixir": "^6.0.0-9",
-    "laravel-elixir-vue": "^0.1.4",
-    "laravel-elixir-webpack-official": "^1.0.2",
-    "lodash": "^4.14.0",
-    "vue": "^1.0.26",
-    "vue-resource": "^0.9.3",
+    "laravel-echo": "^1.2.0",
+    "pusher-js": "^4.0.0",
+    "vue": "^2.1.8",
+    "vue-timeago": "^3.1.5"
+  },
+  "devDependencies": {
+    "eslint": "^3.13.0",
+    "eslint-config-vue": "^2.0.1",
+    "eslint-plugin-html": "^1.7.0",
+    "eslint-plugin-vue": "^1.0.0",
+    "gulp": "^3.9.1",
     "json-loader": "^0.5.4",
-    "vue-timeago": "^2.1.2",
-    "laravel-echo": "^0.1.0",
-    "pusher-js": "^3.2.1"
+    "laravel-elixir": "^6.0.0-15",
+    "laravel-elixir-vue-2": "^0.3.0",
+    "laravel-elixir-webpack-official": "^1.0.10"
   }
 }

public/css/app.css

@@ -2,7 +2,7 @@
   'use strict'
 
   const WebPush = {
-    init() {
+    init () {
       self.addEventListener('push', this.notificationPush.bind(this))
       self.addEventListener('notificationclick', this.notificationClick.bind(this))
       self.addEventListener('notificationclose', this.notificationClose.bind(this))
@@ -15,7 +15,7 @@
      *
      * @param {NotificationEvent} event
      */
-    notificationPush(event) {
+    notificationPush (event) {
       if (!(self.Notification && self.Notification.permission === 'granted')) {
         return
       }
@@ -25,11 +25,10 @@
         event.waitUntil(
             this.sendNotification(event.data.json())
         )
-      }
+      } else {
       // Otherwise just fetch the last notification from the server.
-      else {
         event.waitUntil(
-          self.registration.pushManager.getSubscription().then((subscription) => {
+          self.registration.pushManager.getSubscription().then(subscription => {
             if (subscription) {
               return this.fetchNofication(subscription)
             }
@@ -45,10 +44,10 @@
      *
      * @param {NotificationEvent} event
      */
-    notificationClick(event) {
+    notificationClick (event) {
       // const data = event.notification.data
 
-      if (event.action == 'open') {
+      if (event.action === 'open') {
         self.clients.openWindow('/')
       } else if (event.action === 'other') {
         //
@@ -64,8 +63,8 @@
      *
      * @param {NotificationEvent} event
      */
-    notificationClose(event) {
-      self.registration.pushManager.getSubscription().then((subscription) => {
+    notificationClose (event) {
+      self.registration.pushManager.getSubscription().then(subscription => {
         if (subscription) {
           this.dismissNotification(event, subscription)
         }
@@ -77,7 +76,7 @@
      *
      * @param {PushMessageData|Object} data
      */
-    sendNotification(data) {
+    sendNotification (data) {
       return self.registration.showNotification(data.title, {
         body: data.body,
         icon: data.icon || '/notification-icon.png',
@@ -92,13 +91,13 @@
      * @param  {String} subscription.endpoint
      * @return {Response}
      */
-    fetchNofication({endpoint}) {
-      return fetch(`/notifications/last?endpoint=${encodeURIComponent(endpoint)}`).then((response) => {
+    fetchNofication ({ endpoint }) {
+      return fetch(`/notifications/last?endpoint=${encodeURIComponent(endpoint)}`).then(response => {
         if (response.status !== 200) {
           throw new Error()
         }
 
-        return response.json().then((data) => {
+        return response.json().then(data => {
           return this.sendNotification(data)
         })
       })
@@ -111,12 +110,12 @@
      * @param  {String} subscription.endpoint
      * @return {Response}
      */
-    dismissNotification({notification}, {endpoint}) {
+    dismissNotification ({ notification }, { endpoint }) {
       if (!notification.data.id) {
         return
       }
 
-      const data = new FormData
+      const data = new FormData()
       data.append('endpoint', endpoint)
 
       // Send a request to the server to mark the notification as read.
@@ -128,4 +127,4 @@
   }
 
   WebPush.init()
-})();
+})()