updated to Vue 3 and eslint

.eslintignore

@@ -0,0 +1 @@
+/libs

.eslintrc.js

@@ -0,0 +1,55 @@
+module.exports = {
+    env: {
+        commonjs: true,
+        es2021: true,
+        browser: true,
+    },
+    globals: {
+        Vue: 'readonly',
+    },
+    extends: [ 'eslint:recommended' ],
+    parserOptions: {
+        ecmaVersion: 12,
+    },
+    rules: {
+        'indent': [ 'error', 4 ],
+        'linebreak-style': [ 'error', 'unix' ],
+        'quotes': [ 'error', 'single' ],
+        'semi': [ 'error', 'always' ],
+        'curly': [ 'error', 'all' ],
+        'brace-style': [ 'error', '1tbs' ],
+        'jest/no-done-callback': 'off',
+        'jest/expect-expect': 'off',
+        'comma-dangle': [ 'error', 'always-multiline' ],
+        'complexity': 'error',
+        'consistent-return': 'error',
+        'dot-location': [ 'error', 'property' ],
+        'eqeqeq': [ 'error', 'always', { null: 'ignore' } ],
+        'no-empty-function': 'error',
+        'no-floating-decimal': 'error',
+        'no-multi-spaces': 'error',
+        'camelcase': [ 'error', { properties: 'never' } ],
+        'comma-spacing': [ 'error', { before: false, after: true } ],
+        'array-bracket-newline': [ 'error', { multiline: true } ],
+        'array-element-newline': [ 'error', { multiline: true, minItems: 6 } ],
+        'array-bracket-spacing': [ 'error', 'always' ],
+        'object-curly-spacing': [ 'error', 'always' ],
+        'comma-style': 'error',
+        'computed-property-spacing': 'error',
+        'eol-last': 'error',
+        'func-call-spacing': 'error',
+        'key-spacing': 'error',
+        'keyword-spacing': 'error',
+        'multiline-comment-style': 'error',
+        'newline-per-chained-call': 'error',
+        'no-lonely-if': 'error',
+        'no-multiple-empty-lines': 'error',
+        'no-trailing-spaces': 'error',
+        'no-unneeded-ternary': 'error',
+        'no-whitespace-before-property': 'error',
+        'operator-assignment': 'error',
+        'quote-props': [ 'error', 'consistent-as-needed' ],
+        'space-before-blocks': 'error',
+        'space-infix-ops': 'error',
+    },
+};

.jshintignore

@@ -1 +0,0 @@
-lib

.jshintrc

@@ -1,26 +0,0 @@
-{
-  "esversion": 6,
-  "maxerr": 999,
-  "indent": true,
-  "camelcase": true,
-  "eqeqeq": true,
-  "forin": true,
-  "immed": true,
-  "latedef": true,
-  "noarg": true,
-  "noempty": true,
-  "nonew": true,
-  "undef": true,
-  "unused": true,
-  "varstmt": true,
-  "sub": true,
-  "quotmark": "single",
-  "browser": true,
-  "devel": true,
-  "globals": {
-    "Vue": false,
-    "data": true,
-    "cookies": true,
-    "app": true
-  }
-}

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>Change this you moron</title>
     <link rel="stylesheet" href="style.css">
-    <script type="text/javascript" src="lib/vue.min.js"></script>
+    <script type="text/javascript" src="libs/vue.global.js"></script>
     <script type="text/javascript" src="main.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- card related -->
@@ -25,7 +25,7 @@
         <br>
         <p v-html="content"></p>
         <br>
-        <small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - 2019</small>
+        <small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - {{currentYear}}</small>
     </main>
 </body>
 </html>

main.js

@@ -76,26 +76,34 @@ const utils = {
                 const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
                 document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
             }
-    }
+        },
-  }
+    },
 };
 
 let app = {
-  el: '#app',
+    data() {
-  data: {
+        return {
             title: 'Vue-Boilerplate',
-    content: 'Fill this page with <i>whatever</i> you\'re going to develop.<br><b>Then enjoy!</b>'
+            content: 'Fill this page with <i>whatever</i> you\'re going to develop.<br><b>Then enjoy!</b>',
+        };
     },
-  methods: {},
+    computed: {
-  'mounted': function () {
+        currentYear() {
-    const self = this;
+            return new Date().getFullYear();
+        },
+    },
+    methods: {
+        showApp() {
+            document.getElementById('app').setAttribute('style', '');
+        },
+    },
+    mounted: function () {
         console.log('app mounted');
-    setTimeout(() => {
+        setTimeout(this.showApp);
-      self.$el.setAttribute('style', '');
+    },
-    });
-  }
 };
 
 window.onload = () => {
-  app = new Vue(app);
+    app = Vue.createApp(app);
+    app.mount('#app');
 };