Fix #3 - Add ESLint support

.babelrc

@@ -1,11 +1,8 @@
 {
   "presets": [
-    ["es2015", {
-      "modules": false,
-      "loose": true
-    }],
-    "stage-2"
+    ["env", {
+      "es2015": { "modules": false }
+    }]
   ],
-  "plugins": ["transform-runtime", "syntax-dynamic-import"],
   "comments": false
 }

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  env: {
+    browser: true,
+    node: true
+  },
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // add your custom rules here
+  rules: {},
+  globals: {}
+}

README.md

@@ -1,6 +1,6 @@
 CordoVue
 ===============
-Cordova with Vue and Webpack.
+A simple apache cordova sample project using Vue, Vuex, Vue-router, ESLint and Webpack.
 
 Getting Started
 ---------------
@@ -14,32 +14,40 @@ To use this you'll need Node.js v6 or newer.
 $ git clone https://github.com/TheMushrr00m/cordovue.git MyAwesomeApp
 $ cd MyAwesomeApp
 $ yarn install
-$ yarn run build
-$ yarn run android
-$ yarn run ios
+$ yarn build
+$ yarn android
+$ yarn ios
 ```
 
+As simple as that!!
+
+Route: '/'
+![Cordovue app](preview1.png)
+
+Route: '/#/about'
+![Cordovue app](preview2.png)
 
 Please, change `MyAwesomeApp` with your folder name.  
 Then, you can open the app in your browser by visiting [localhost:8888](http://localhost:8888)  
 
 ### What's included
-- `yarn run dev`: Webpack config for source map & hot-reload.
-- `yarn run build`: Production build with HTML/CSS/JS minification.
-- `yarn run prepare [ ios | android ]`: Set the platform. Example (`yarn run prepare -- android`).
-- `yarn run [ ios | android ]`: Run in the iOS simulator / Android emulator. (Running in another terminal). Or physical device.
-- `yarn run compile [ ios | android ]`: Build the app for the specified platform. Example (`yarn run compile -- ios`). (Coming soon).
-- `yarn run clean`: Clean the `platforms/` and `dist/` folders. (Coming soon)
+- `yarn dev`: Webpack config for source map & hot-reload.
+- `yarn build`: Production build with HTML/CSS/JS minification.
+- `yarn prepare [ ios | android ]`: Set the platform. Example (`yarn prepare -- android`).
+- `yarn [ ios | android ]`: Run in the iOS simulator / Android emulator. (Running in another terminal). Or physical device.
+- `yarn compile [ ios | android ]`: Build the app for the specified platform. Example (`yarn compile -- ios`). (Coming soon).
+- `yarn clean`: Clean the `platforms/` and `dist/` folders. (Coming soon)
 
 ### Tutorials
 [Presenting Cordovue - Spanish](http://laesporadelhongo.com/cordovue/)
 
 ### TO-DO
-- Add test support.
-- Linting maybe.
+- Tests (is it necessary?).
 
 ## License
 MIT. Copyright (c) 2017 Gabriel Cueto <@Mushr00m_Dev>. Modified by @eugenioclrc
 
 ## Credits
 - [Vue Webpack-simple Boilerplate](https://github.com/vuejs-templates/webpack-simple)
+
+Created with :heart: in Cancún :sunglasses:

package.json

@@ -1,7 +1,7 @@
 {
     "name": "cordovue",
     "description": "Cordova template using VueJS, Webpack, ES2015",
-    "version": "1.0.2",
+    "version": "1.0.5",
     "author": {
         "name": "Gabriel Cueto <@Mushr00m_Dev>",
         "email": "[email protected]",
@@ -22,8 +22,10 @@
         "cordova:template",
         "phonegap:template",
         "vue.js",
+        "vuejs",
         "webpack",
-        "hot-reload"
+        "hot-reload",
+        "eslint"
     ],
     "cordova": {
         "id": "cordovue",
@@ -41,34 +43,45 @@
         "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
         "android": "cordova run android",
         "ios": "cordova run ios",
-        "serve": "cordova serve --port 8080"
+        "serve": "cordova serve --port 8080",
+        "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
+        "precommit": "npm run lint"
     },
     "engine": "node >= 6.0.0",
     "dependencies": {
-        "autoprefixer": "^7.1.1",
-        "cordova": "^7.0.1",
-        "extract-text-webpack-plugin": "^2.1.0",
-        "friendly-errors-webpack-plugin": "^1.6.1",
-        "vue": "^2.3.3",
-        "vue-router": "^2.5.3",
-        "vuex": "^2.3.1",
-        "vuex-router-sync": "^4.1.2",
-        "cordova-android": "~6.1.2",
-        "cordova-plugin-whitelist": "1"
+        "cordova": "^7.1.0",
+        "cordova-android": "^6.3.0",
+        "cordova-plugin-whitelist": "^1.3.2",
+        "vue": "^2.5.2",
+        "vue-router": "^3.0.1",
+        "vuex": "^3.0.1",
+        "vuex-router-sync": "^5.0.0"
     },
     "devDependencies": {
-        "babel-core": "^6.24.1",
-        "babel-loader": "^7.0.0",
+        "autoprefixer": "^7.1.6",
+        "babel-core": "^6.26.0",
+        "babel-eslint": "^8.0.1",
+        "babel-loader": "^7.1.2",
         "babel-plugin-syntax-dynamic-import": "^6.18.0",
         "babel-plugin-transform-runtime": "^6.23.0",
-        "babel-preset-es2015": "^6.24.1",
-        "babel-preset-stage-2": "^6.24.1",
-        "cross-env": "^5.0.0",
-        "css-loader": "^0.28.1",
-        "file-loader": "^0.11.1",
-        "vue-loader": "^12.1.0",
-        "vue-template-compiler": "^2.3.3",
-        "webpack": "^2.5.1",
-        "webpack-dev-server": "^2.4.5"
+        "babel-polyfill": "^6.26.0",
+        "babel-preset-env": "^1.6.1",
+        "cross-env": "^5.1.1",
+        "css-loader": "^0.28.7",
+        "eslint": "^4.10.0",
+        "eslint-config-standard": "^10.2.1",
+        "eslint-loader": "^1.9.0",
+        "eslint-plugin-html": "^3.2.2",
+        "eslint-plugin-import": "^2.8.0",
+        "eslint-plugin-node": "^5.2.1",
+        "eslint-plugin-promise": "^3.6.0",
+        "eslint-plugin-standard": "^3.0.1",
+        "extract-text-webpack-plugin": "^3.0.2",
+        "file-loader": "^1.1.5",
+        "friendly-errors-webpack-plugin": "^1.6.1",
+        "vue-loader": "^13.3.0",
+        "vue-template-compiler": "^2.5.2",
+        "webpack": "^3.8.1",
+        "webpack-dev-server": "^2.9.4"
     }
 }

webpack.config.js

@@ -35,6 +35,12 @@ module.exports = {
         loader: 'vue-loader',
         options: vueConfig
       },
+      {
+        enforce: 'pre',
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        exclude: /(node_modules)/
+      },
       {
         test: /\.(png|jpg|gif|svg)$/,
         loader: 'url-loader',
@@ -74,3 +80,4 @@ module.exports = {
         new FriendlyErrorsPlugin()
       ]
 }
+

www/index.html

@@ -26,7 +26,7 @@
             * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
             * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
             * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
-                * Enable inline JS: add 'unsafe-inline' to default-src
+            * Enable inline JS: add 'unsafe-inline' to default-src
         -->
         <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
         <meta name="format-detection" content="telephone=no">
@@ -37,7 +37,7 @@
     </head>
     <body>
         <div id="app"></div>
-        
+
         <script type="text/javascript" src="cordova.js"></script>
         <script type="text/javascript" src="dist/build.js"></script>
     </body>

www/src/App.vue

@@ -1,10 +1,17 @@
 <template>
-	<div>
-		<transition name="fade">
+  <div>
+    <transition name="fade">
       <router-view class="child-view"></router-view>
     </transition>
-	</div>
+  </div>
 </template>
+
+<script>
+  export default {
+    name: 'app'
+  }
+</script>
+
 <style>
 .fade-enter-active, .fade-leave-active {
   transition: opacity .3s ease;
@@ -13,8 +20,3 @@
   opacity: 0
 }
 </style>
-<script>
-	export default {
-		name: 'app'
-	}
-</script>

www/src/Cordova.js

@@ -17,28 +17,29 @@
  * under the License.
  */
 export default {
-    // Application Constructor
-    initialize: function() {
-        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
-    },
+  // Application Constructor
+  initialize () {
+    document.addEventListener('deviceready', this.onDeviceReady.bind(this), false)
+  },
 
-    // deviceready Event Handler
-    //
-    // Bind any cordova events here. Common events are:
-    // 'pause', 'resume', etc.
-    onDeviceReady: function() {
-        this.receivedEvent('deviceready');
-    },
+  /* deviceready Event Handler
+  //
+  // Bind any cordova events here. Common events are:
+  // 'pause', 'resume', etc.
+  */
+  onDeviceReady () {
+    this.receivedEvent('deviceready')
+  },
 
-    // Update DOM on a Received Event
-    receivedEvent: function(id) {
-        var parentElement = document.getElementById(id);
-        var listeningElement = parentElement.querySelector('.listening');
-        var receivedElement = parentElement.querySelector('.received');
+  // Update DOM on a Received Event
+  receivedEvent (id) {
+    const parentElement = document.getElementById(id)
+    const listeningElement = parentElement.querySelector('.listening')
+    const receivedElement = parentElement.querySelector('.received')
 
-        listeningElement.setAttribute('style', 'display:none;');
-        receivedElement.setAttribute('style', 'display:block;');
+    listeningElement.setAttribute('style', 'display:none;')
+    receivedElement.setAttribute('style', 'display:block;')
 
-        console.log('Received Event: ' + id);
-    }
-}
+    console.log('Received Event: ' + id)
+  }
+}

www/src/main.js

@@ -1,20 +1,21 @@
+import 'babel-polyfill'
 import Vue from 'vue'
 import App from './App.vue'
 import Cordova from './Cordova.js'
 
-import store from './store';
-import router from './router';
-import { sync } from 'vuex-router-sync';
+import store from './store'
+import router from './router'
+import { sync } from 'vuex-router-sync'
 
-sync(store, router);
+sync(store, router)
 
 // Load Vue instance
-new Vue({
+export default new Vue({
   router,
   store,
   el: '#app',
   render: h => h(App),
-  mounted() {
+  mounted () {
     Cordova.initialize()
   }
 })

www/src/router/index.js

@@ -1,19 +1,19 @@
-import Vue from 'vue';
-import Router from 'vue-router';
+import Vue from 'vue'
+import Router from 'vue-router'
 
 // const Foo = resolve => require(['../views/hello.vue'], resolve);
 // import hello from '../views/hello.vue';
 
-import main from '../views/main.vue';
-import about from '../views/about.vue';
+import main from '../views/main.vue'
+import about from '../views/about.vue'
 
-Vue.use(Router);
+Vue.use(Router)
 
 export default new Router({
   mode: 'hash',
   scrollBehavior: () => ({ y: 0 }),
   routes: [
     { name: 'home', path: '/', component: main },
-    { name: 'about', path: '/about', component: about },
-  ],
-});
+    { name: 'about', path: '/about', component: about }
+  ]
+})