From 69c8d91bf1bb8d57a472582614cf949faea954b6 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Tue, 14 Jul 2020 16:21:48 +0200
Subject: [PATCH 01/33] Refactor

---
 .../src/api/endpoints/authorisation/login.js  |   2 +-
 .../src/api/endpoints/authorisation/logout.js |   2 +-
 .../api/endpoints/authorisation/password.js   |   2 +-
 .../api/endpoints/authorisation/register.js   |   2 +-
 .../src/api/endpoints/password/forgotten.js   |   2 +-
 .../src/api/endpoints/password/reset.js       |   4 +-
 .../components/Authorisation/LoginCard.vue    |   4 +-
 .../Authorisation/PasswordForgottenCard.vue   |   7 +-
 .../Authorisation/PasswordResetCard.vue       |  50 +++--
 .../components/Authorisation/RegisterCard.vue |   2 +
 .../src/guards/AuthorisationGuard             |   9 -
 .../src/guards/AuthorisationGuard.js          |  11 +
 .../src/templates/Authorisation.vue           |  19 +-
 .../src/views/AuthorisationCallback.vue       |  13 +-
 .../src/views/InvitationAccept.vue            | 180 ++++++++-------
 .../Authorisation/src/views/Login.vue         |  11 +-
 .../Authorisation/src/views/PasswordReset.vue |  14 +-
 .../Crud/src/components/Resource.vue          |  11 +-
 .../components/VuetifyResourceBaseForm.vue    |   6 -
 .../forms/{User.vue => UserForm.vue}          |  20 +-
 .../Crud/src/mixins/formDataValues.js         |   6 +-
 .../templates/Crud/src/views/UserResource.vue |  57 +++--
 generator/templates/Default/src/App.vue       |  14 +-
 .../Default/src/Views/PageForbidden.vue       |  28 ---
 .../Default/src/Views/PageNotFound.vue        |  28 ---
 .../src/api/implementation/app/index.js       |  13 +-
 .../src/api/implementation/app/interceptor.js |  23 +-
 .../src/api/implementation/app/wrapper.js     |  56 +----
 .../Default/src/api/util/response.js          |  11 +
 .../api/utils/handleTooManyRequestsError.js   |  10 -
 .../Default/src/application/util/url.js       |  15 ++
 .../Default/src/components/AppBarMenu.vue     |  17 +-
 .../Default/src/components/BaseForm.vue       |  12 +-
 .../src/components/PaginatedAutocomplete.vue  | 212 +++++++++---------
 .../Default/src/components/menu/MainMenu.vue  |  17 ++
 .../{MainMenu.vue => menu/Menu.vue}           |  55 ++---
 .../templates/Default/src/router/index.js     |   2 -
 .../templates/Default/src/store/index.js      |   9 +-
 .../src/store/modules/Authorisation.js        |   5 +
 .../Default/src/store/modules/Error.js        |   1 -
 .../Default/src/templates/Default.vue         |  28 ++-
 .../templates/Default/src/views/Home.vue      |  23 +-
 .../Default/src/views/PageForbidden.vue       |  13 ++
 .../Default/src/views/PageNotFound.vue        |  13 ++
 .../Plugins/sentry/src/plugins/sentry.js      |   8 +-
 prompts.js                                    |   6 +-
 46 files changed, 507 insertions(+), 546 deletions(-)
 delete mode 100644 generator/templates/Authorisation/src/guards/AuthorisationGuard
 create mode 100644 generator/templates/Authorisation/src/guards/AuthorisationGuard.js
 rename generator/templates/Crud/src/components/forms/{User.vue => UserForm.vue} (83%)
 delete mode 100644 generator/templates/Default/src/Views/PageForbidden.vue
 delete mode 100644 generator/templates/Default/src/Views/PageNotFound.vue
 create mode 100644 generator/templates/Default/src/api/util/response.js
 delete mode 100644 generator/templates/Default/src/api/utils/handleTooManyRequestsError.js
 create mode 100644 generator/templates/Default/src/application/util/url.js
 create mode 100644 generator/templates/Default/src/components/menu/MainMenu.vue
 rename generator/templates/Default/src/components/{MainMenu.vue => menu/Menu.vue} (57%)
 create mode 100644 generator/templates/Default/src/views/PageForbidden.vue
 create mode 100644 generator/templates/Default/src/views/PageNotFound.vue

diff --git a/generator/templates/Authorisation/src/api/endpoints/authorisation/login.js b/generator/templates/Authorisation/src/api/endpoints/authorisation/login.js
index 42e28bb..d7919fa 100644
--- a/generator/templates/Authorisation/src/api/endpoints/authorisation/login.js
+++ b/generator/templates/Authorisation/src/api/endpoints/authorisation/login.js
@@ -1,4 +1,4 @@
-import {post} from '../../implementation/app/wrapper';
+import {post} from '../../implementation/app';
 
 export default function (email, password) {
     return post('auth/login', {
diff --git a/generator/templates/Authorisation/src/api/endpoints/authorisation/logout.js b/generator/templates/Authorisation/src/api/endpoints/authorisation/logout.js
index 8f4931a..fbc1259 100644
--- a/generator/templates/Authorisation/src/api/endpoints/authorisation/logout.js
+++ b/generator/templates/Authorisation/src/api/endpoints/authorisation/logout.js
@@ -1,4 +1,4 @@
-import {post} from '../../implementation/app/wrapper.js';
+import {post} from '../../implementation/app';
 
 export default function () {
     return post('auth/logout');
diff --git a/generator/templates/Authorisation/src/api/endpoints/authorisation/password.js b/generator/templates/Authorisation/src/api/endpoints/authorisation/password.js
index 19db457..98bbf24 100644
--- a/generator/templates/Authorisation/src/api/endpoints/authorisation/password.js
+++ b/generator/templates/Authorisation/src/api/endpoints/authorisation/password.js
@@ -1,4 +1,4 @@
-import {post} from '../../implementation/app/wrapper.js';
+import {post} from '../../implementation/app';
 
 function passwordForgotten(email) {
     return post('password/forgotten', {
diff --git a/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js b/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js
index d5b155e..800b5e9 100644
--- a/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js
+++ b/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js
@@ -1,4 +1,4 @@
-import {post} from '../../implementation/app/wrapper.js';
+import {post} from '../../implementation/app';
 
 export default function (email, name) {
     return post('registration', {
diff --git a/generator/templates/Authorisation/src/api/endpoints/password/forgotten.js b/generator/templates/Authorisation/src/api/endpoints/password/forgotten.js
index 3644853..f76f541 100644
--- a/generator/templates/Authorisation/src/api/endpoints/password/forgotten.js
+++ b/generator/templates/Authorisation/src/api/endpoints/password/forgotten.js
@@ -1,4 +1,4 @@
-import {post} from '../../implementation/app/wrapper.js';
+import {post} from '../../implementation/app';
 
 export default function (email) {
     return post('password/forgotten', {
diff --git a/generator/templates/Authorisation/src/api/endpoints/password/reset.js b/generator/templates/Authorisation/src/api/endpoints/password/reset.js
index b32be24..83caf14 100644
--- a/generator/templates/Authorisation/src/api/endpoints/password/reset.js
+++ b/generator/templates/Authorisation/src/api/endpoints/password/reset.js
@@ -1,10 +1,10 @@
-import {post} from '../../implementation/app/wrapper.js';
+import {post} from '../../implementation/app';
 
 export default async function (email, token, password, passwordConfirmation) {
     return post('registration', {
         email: email,
         token: token,
         password: password,
-        password_confirmation: passwordConfirmation
+        password_confirmation: passwordConfirmation,
     });
 }
diff --git a/generator/templates/Authorisation/src/components/Authorisation/LoginCard.vue b/generator/templates/Authorisation/src/components/Authorisation/LoginCard.vue
index 9d66b95..89a4ba8 100644
--- a/generator/templates/Authorisation/src/components/Authorisation/LoginCard.vue
+++ b/generator/templates/Authorisation/src/components/Authorisation/LoginCard.vue
@@ -61,7 +61,7 @@ export default {
     },
     computed: {
         ...mapGetters({
-            findError: 'Error/find',
+            findError: 'error/find',
         }),
     },
     methods: {
@@ -70,7 +70,7 @@ export default {
             LoginRequest(this.form.email, this.form.password)
                 .then(res => {
                     this.isRedirecting = true;
-                    this.redirectToAuthDispense(res.data.token);
+                    this.redirectToAuthDispense(res.data.data.token);
                 })
                 .catch(() => this.errorMessage = this.findError('email'))
                 .finally(() => this.isLoading = false);
diff --git a/generator/templates/Authorisation/src/components/Authorisation/PasswordForgottenCard.vue b/generator/templates/Authorisation/src/components/Authorisation/PasswordForgottenCard.vue
index 8b7ddb1..6172785 100644
--- a/generator/templates/Authorisation/src/components/Authorisation/PasswordForgottenCard.vue
+++ b/generator/templates/Authorisation/src/components/Authorisation/PasswordForgottenCard.vue
@@ -49,16 +49,15 @@ export default {
             if (!this.isValid) return;
 
             this.isLoading = true;
+            this.alertMessage = '';
+            this.alertType = 'error';
 
             ForgottenRequest(this.form.email)
                 .then(() => {
                     this.alertMessage = 'Er is een wachtwoord vergeten mail verstuurd mits er een account bestaat met het gegeven email adres.';
                     this.alertType = 'success';
                 })
-                .catch(() => {
-                    this.alertMessage = 'De ingevulde gegevens kloppen niet.';
-                    this.alertType = 'error';
-                })
+                .catch(() => this.alertMessage = 'De ingevulde gegevens kloppen niet.')
                 .finally(() => this.isLoading = false);
         },
     },
diff --git a/generator/templates/Authorisation/src/components/Authorisation/PasswordResetCard.vue b/generator/templates/Authorisation/src/components/Authorisation/PasswordResetCard.vue
index ee7574d..8457ed3 100644
--- a/generator/templates/Authorisation/src/components/Authorisation/PasswordResetCard.vue
+++ b/generator/templates/Authorisation/src/components/Authorisation/PasswordResetCard.vue
@@ -1,10 +1,10 @@
 <template>
     <v-card height="100%">
-        <v-form @submit.prevent="handleRegister()" ref="form" v-model="valid">
+        <v-form @submit.prevent="handleRegister()" ref="form" v-model="isValid">
             <v-card-title class="title">Ik wil een account aanvragen</v-card-title>
             <v-card-text>
                 <v-alert
-                    :value="alertMessage !== null"
+                    :value="!!alertMessage.length"
                     class="mb-10"
                     transition="fade-transition"
                     :type="alertType"
@@ -46,21 +46,22 @@
 
 <script>
 import resetRequest from '../../api/endpoints/password/reset.js';
+import {getRateLimitMinutes} from '../../api/util/response.js';
 
 export default {
     name: 'PasswordResetCard',
     props: {
         token: {
             type: String,
-            required: true
-        }
+            required: true,
+        },
     },
     data() {
         return {
-            alertType: 'info',
-            alertMessage: null,
+            alertType: 'success',
+            alertMessage: '',
             isLoading: false,
-            valid: null,
+            isValid: false,
             form: {
                 email: '',
                 password: '',
@@ -70,16 +71,35 @@ export default {
         };
     },
     methods: {
-        async handleRegister() {
+        handleRegister() {
             this.$refs.form.validate();
-            if (!this.valid) {
-                return;
-            }
+
+            if (!this.isValid) return;
+
             this.isLoading = true;
-            const {success, message} = await resetRequest(this.form.email, this.token, this.form.password, this.form.passwordConfirmation);
-            this.alertType = success ? 'success' : 'error';
-            this.alertMessage = message;
-            this.isLoading = false;
+            this.alertType = 'error';
+            this.errorMessage = '';
+
+            resetRequest(this.form.email, this.token, this.form.password, this.form.passwordConfirmation)
+                .then(() => {
+                    this.alertType = 'success';
+                    this.alertMessage = 'Je wachtwoord is opnieuw ingesteld, je kan nu inloggen.';
+                })
+                .catch(error => {
+                    const response = error.response;
+                    const status = response.status;
+
+                    if (status === 429) {
+                        this.alertMessage =
+                            `Je hebt tevaak een foutieve login poging gedaan. Probeer het over ${getRateLimitMinutes(response, 15)} minuten opnieuw`;
+                    } else if (status === 400) {
+                        this.alertMessage =
+                            'Deze wachtwoord reset pagina is verlopen, vraag opnieuw een wachtwoord aan via de wachtwoord vergeten optie';
+                    }
+
+                    this.$refs.form.validate();
+                })
+                .finally(() => this.isLoading = false);
         },
     },
 };
diff --git a/generator/templates/Authorisation/src/components/Authorisation/RegisterCard.vue b/generator/templates/Authorisation/src/components/Authorisation/RegisterCard.vue
index 3276e36..5626fb0 100644
--- a/generator/templates/Authorisation/src/components/Authorisation/RegisterCard.vue
+++ b/generator/templates/Authorisation/src/components/Authorisation/RegisterCard.vue
@@ -56,6 +56,8 @@ export default {
             if (!this.isValid) return;
 
             this.isLoading = true;
+            this.alertType = 'error';
+            this.alertMessage = '';
 
             RegisterRequest(this.form.email, this.form.name)
                 .then(() => {
diff --git a/generator/templates/Authorisation/src/guards/AuthorisationGuard b/generator/templates/Authorisation/src/guards/AuthorisationGuard
deleted file mode 100644
index f691177..0000000
--- a/generator/templates/Authorisation/src/guards/AuthorisationGuard
+++ /dev/null
@@ -1,9 +0,0 @@
-import Vue from 'vue';
-
-export default function (to, from, next) {
-    if (!Vue.prototype.$store.getters['Authorisation/isLoggedIn']) {
-        next({name: 'login'});
-        return;
-    }
-    next();
-}
diff --git a/generator/templates/Authorisation/src/guards/AuthorisationGuard.js b/generator/templates/Authorisation/src/guards/AuthorisationGuard.js
new file mode 100644
index 0000000..35fce64
--- /dev/null
+++ b/generator/templates/Authorisation/src/guards/AuthorisationGuard.js
@@ -0,0 +1,11 @@
+import store from '../store';
+
+export default function (to, from, next) {
+    if (store.getters['authorisation/isLoggedIn']) {
+        next({
+            name: 'login',
+        });
+        return;
+    }
+    next();
+}
diff --git a/generator/templates/Authorisation/src/templates/Authorisation.vue b/generator/templates/Authorisation/src/templates/Authorisation.vue
index 2e4d0df..2c4e046 100644
--- a/generator/templates/Authorisation/src/templates/Authorisation.vue
+++ b/generator/templates/Authorisation/src/templates/Authorisation.vue
@@ -6,23 +6,8 @@
     </v-main>
 </template>
 
-<script>
-
+<script lang="js">
 export default {
-    components: {},
-    watch: {},
-    props: [],
-    name: 'template-authorisation',
-    data() {
-        return {};
-    },
-    created() {
-
-    },
-    methods: {},
+    name: 'Authorisation',
 };
 </script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/generator/templates/Authorisation/src/views/AuthorisationCallback.vue b/generator/templates/Authorisation/src/views/AuthorisationCallback.vue
index 7bec31d..9ffb628 100644
--- a/generator/templates/Authorisation/src/views/AuthorisationCallback.vue
+++ b/generator/templates/Authorisation/src/views/AuthorisationCallback.vue
@@ -1,23 +1,26 @@
 <template>
-    <v-overlay :value="true">
+    <v-overlay>
         <VProgressCircular indeterminate size="64"/>
     </v-overlay>
 </template>
-<script>
+
+<script lang="js">
 import {mapMutations} from 'vuex';
+import {getFragment} from '../application/util/url.js';
 
 export default {
     name: 'AuthorisationCallback',
     methods: {
         ...mapMutations({
-            setAuthorisationToken: 'Authorisation/setAuthorisationToken',
+            setAuthorisationToken: 'authorisation/setAuthorisationToken',
         }),
     },
     created() {
         const redirectUri = this.$route.query.redirect_uri;
 
-        const regex = new RegExp('[\\#&]token=([^&#]*)');
-        const token = decodeURIComponent(regex.exec(this.$route.hash)[1]);
+        const token = getFragment('token');
+
+        if (!token) return; // what to do?
 
         this.setAuthorisationToken(token);
 
diff --git a/generator/templates/Authorisation/src/views/InvitationAccept.vue b/generator/templates/Authorisation/src/views/InvitationAccept.vue
index 73b769e..436225e 100644
--- a/generator/templates/Authorisation/src/views/InvitationAccept.vue
+++ b/generator/templates/Authorisation/src/views/InvitationAccept.vue
@@ -1,123 +1,133 @@
 <template>
-    <v-form @submit.prevent="handleAccept()" ref="form" v-model="valid">
+    <v-form @submit.prevent="handleAccept()" ref="form">
         <v-card>
             <v-card-text>
                 <img :src="require('../assets/logo.png')" class="logo">
-                <template v-if="!loading">
+                <div v-if="!isLoading">
                     <v-alert
-                        :value="errorMessage !== null"
+                        :value="!!firstValidGlobalError.length"
                         class="mb-10"
                         transition="fade-transition"
                         type="error"
                     >
-                        {{errorMessage}}
+                        {{firstValidGlobalError}}
                     </v-alert>
-                    <v-text-field
+                    <VTextField
                         :rules="[(v) => !!v || 'E-Mail is verplicht']"
                         label="E-Mail"
                         v-model="email"
-                    ></v-text-field>
-                    <v-text-field
-                        :append-icon="showpassword ? 'fa-eye-slash' : 'fa-eye'"
-                        :rules="[(v) => !!v || 'Wachtwoord is verplicht', v => serverError('password', v)]"
-                        :type="showpassword ? 'text' : 'password'"
-                        @click:append="showpassword = !showpassword"
+                    />
+                    <VTextField
+                        :append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
+                        :rules="[(v) => !!v || 'Wachtwoord is verplicht', () => serverError('password')]"
+                        :type="showPassword ? 'text' : 'password'"
+                        @click:append="showPassword = !showPassword"
                         label="Wachtwoord"
                         v-model="password"
-                    ></v-text-field>
-                    <v-text-field
-                        :append-icon="showpassword ? 'fa-eye-slash' : 'fa-eye'"
+                    />
+                    <VTextField
+                        :append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'"
                         :rules="[(v) => !!v || 'Wachtwoord is verplicht']"
-                        :type="showpassword ? 'text' : 'password'"
-                        @click:append="showpassword = !showpassword"
+                        :type="showPassword ? 'text' : 'password'"
+                        @click:append="showPassword = !showPassword"
                         label="Wachtwoord"
-                        v-model="password_confirmation"
-                    ></v-text-field>
-                </template>
+                        v-model="passwordConfirmation"
+                    />
+                </div>
                 <div class="text-center" v-else>
-                    <v-progress-circular
+                    <VProgressCircular
                         :size="70"
                         :width="7"
                         color="accent"
                         indeterminate
-                    ></v-progress-circular>
+                    />
                 </div>
             </v-card-text>
             <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn @click="handleAccept()" type="submit" color="accent">Uitnodiging accepteren</v-btn>
+                <VSpacer/>
+                <v-btn type="submit" color="accent">Uitnodiging accepteren</v-btn>
             </v-card-actions>
         </v-card>
     </v-form>
 </template>
 
-<script>
+<script lang="js">
+import axios from '../api/implementation/app';
+import {mapGetters} from 'vuex;';
+
+export default {
+    name: 'InvitationAccept',
+    data() {
+        return {
+            isLoading: false,
+            email: '',
+            password: '',
+            passwordConfirmation: '',
+            errorMessage: '',
+            showPassword: false,
+            errors: {},
+        };
+    },
+    computed: {
+        ...mapGetters({
+            isLoggedIn: 'authorisation/isLoggedIn',
+            firstError: 'error/first',
+            findError: 'error/find',
+        }),
+        firstValidGlobalError: vm => vm.errorMessage || vm.firstError,
+    },
+    created() {
+        if (this.isLoggedIn) {
+            this.$router.push({
+                name: 'home',
+            });
+        }
+        this.email = this.$route.query.email || '';
+    },
+    methods: {
+        handleAccept() {
+            this.$refs.form.validate();
+
+            this.isLoading = true;
 
-    export default {
-        components: {},
-        watch: {},
-        props: [],
-        name: '',
-        data() {
-            return {
-                loading: false,
-                valid: null,
-                email: '',
-                password: '',
-                password_confirmation: '',
-                errorMessage: null,
-                showpassword: false,
-                errors: {},
-            };
+            axios.post('invitation/accept', {
+                email: this.email,
+                password: this.password,
+                password_confirmation: this.passwordConfirmation,
+                token: this.$route.params.token,
+            }).then(() => this.$router.push({
+                    name: 'login',
+                }),
+            ).catch(error => {
+                const response = error.response;
+                const data = response.data;
+
+                if (response.status === 422) {
+                    this.errors = data.errors || [];
+                    process.nextTick(() => {
+                        this.$refs.form.validate();
+                    });
+                } else {
+                    if (data.message) this.errorMessage = data.message;
+                    else this.errorMessage = 'Er ging iets mis';
+                }
+            }).finally(() => this.isLoading = false);
         },
-        created() {
-            if (this.$store.getters['Authorisation/isLoggedIn']) {
-                this.$router.push({name: 'home'});
-            }
-            this.email = this.$route.query.email;
+        handleLogin() {
+            this.$router.push({
+                name: 'login',
+            });
         },
-        methods: {
-            handleAccept() {
-                this.$refs.form.validate();
-                this.loading = true;
-                this.$http.post('invitation/accept', {
-                    email: this.email,
-                    password: this.password,
-                    password_confirmation: this.password_confirmation,
-                    token: this.$route.params.token,
-                }).then(() => {
-                    this.loading = false;
-                    this.handleLogin();
-                }).catch((error) => {
-                    this.loading = false;
-                    if (error.response.status === 422) {
-                        this.errors = error.response.data.errors;
-                        process.nextTick(() => {
-                            this.$refs.form.validate();
-                        });
-                    } else {
-                        this.errorMessage = 'Er ging iets mis.';
-                        if(typeof error.response.data.message !== 'undefined' && error.response.data.message !== null) {
-                            this.errorMessage = error.response.data.message;
-                        }
-                    }
-                });
-            },
-            handleLogin() {
-                this.$router.push({name: 'login'});
-            }, serverError(name) {
-                if (this.errors !== null && typeof this.errors[name] !== 'undefined') {
-                    return this.errors[name][0];
-                }
-                return true;
-            },
+        serverError(name) {
+            return this.findError(name) || true;
         },
-    };
+    },
+};
 </script>
 
 <style scoped lang="scss">
-    .logo {
-        display: block;
-        margin: 0 auto;
-    }
+.logo {
+    display: block;
+    margin: 0 auto;
+}
 </style>
diff --git a/generator/templates/Authorisation/src/views/Login.vue b/generator/templates/Authorisation/src/views/Login.vue
index ca603e4..c0a541b 100644
--- a/generator/templates/Authorisation/src/views/Login.vue
+++ b/generator/templates/Authorisation/src/views/Login.vue
@@ -9,16 +9,15 @@
     </v-row>
 </template>
 
-<script>
+<script lang="js">
 import RegisterCard from '../components/Authorisation/RegisterCard.vue';
 import LoginCard from '../components/Authorisation/LoginCard.vue';
 
 export default {
     name: 'Login',
-    components: {RegisterCard, LoginCard},
+    components: {
+        RegisterCard,
+        LoginCard,
+    },
 };
 </script>
-
-<style scoped>
-
-</style>
diff --git a/generator/templates/Authorisation/src/views/PasswordReset.vue b/generator/templates/Authorisation/src/views/PasswordReset.vue
index 75f4ceb..add04e6 100644
--- a/generator/templates/Authorisation/src/views/PasswordReset.vue
+++ b/generator/templates/Authorisation/src/views/PasswordReset.vue
@@ -6,11 +6,13 @@
     </v-row>
 </template>
 
-<script>
+<script lang="js">
+import PasswordResetCard from '../components/Authorisation/PasswordResetCard.vue';
 
-    import PasswordResetCard from '../components/Authorisation/PasswordResetCard.vue';
-    export default {
-        name: 'PasswordReseet',
-        components: {PasswordResetCard},
-    };
+export default {
+    name: 'PasswordReset',
+    components: {
+        PasswordResetCard,
+    },
+};
 </script>
diff --git a/generator/templates/Crud/src/components/Resource.vue b/generator/templates/Crud/src/components/Resource.vue
index ea9c700..f290d96 100644
--- a/generator/templates/Crud/src/components/Resource.vue
+++ b/generator/templates/Crud/src/components/Resource.vue
@@ -174,7 +174,6 @@ export default {
             this.appendFormData(formData, this.mapCreateFormValuesHandler(cloneDeep(this.createForm.values)));
 
             return formData;
-
         },
         createEvent() {
             this.errors = {};
@@ -192,16 +191,14 @@ export default {
                                 } else {
                                     resolve();
                                 }
-                            }).catch((error) => {
-                            this.errors = error.data.errors;
+                            }).catch(error => {
+                            this.errors = error.response.data.errors;
                             reject();
                         });
-
                     } else {
                         reject();
                     }
                 });
-
             });
         },
         getUpdateFormValues() {
@@ -225,8 +222,8 @@ export default {
                                 } else {
                                     resolve();
                                 }
-                            }).catch((error) => {
-                            this.errors = error.data.errors;
+                            }).catch(error => {
+                            this.errors = error.response.data.errors;
                             reject();
                         });
 
diff --git a/generator/templates/Crud/src/components/VuetifyResourceBaseForm.vue b/generator/templates/Crud/src/components/VuetifyResourceBaseForm.vue
index bb5a277..38c7c80 100644
--- a/generator/templates/Crud/src/components/VuetifyResourceBaseForm.vue
+++ b/generator/templates/Crud/src/components/VuetifyResourceBaseForm.vue
@@ -11,12 +11,6 @@ export default {
             },
             type: Object,
         },
-        errors: {
-            default() {
-                return {};
-            },
-            type: Object,
-        },
         isUpdateForm: {
             type: Boolean,
             default: false,
diff --git a/generator/templates/Crud/src/components/forms/User.vue b/generator/templates/Crud/src/components/forms/UserForm.vue
similarity index 83%
rename from generator/templates/Crud/src/components/forms/User.vue
rename to generator/templates/Crud/src/components/forms/UserForm.vue
index 265958d..00a93df 100644
--- a/generator/templates/Crud/src/components/forms/User.vue
+++ b/generator/templates/Crud/src/components/forms/UserForm.vue
@@ -3,7 +3,7 @@
         <v-form ref="form" v-model="valid" class="mt-5">
             <v-col cols="12" sm="10" offset-sm="1" md="8" offset-md="2" lg="6" offset-lg="3">
                 <v-subheader class="pa-0">Gebruiker</v-subheader>
-                <v-card class="themed-color">
+                <v-card>
                     <v-card-text>
                         <VTextField
                             :counter="100"
@@ -23,11 +23,17 @@
     </v-container>
 </template>
 
-<script>
-    import Form from '@/components/VuetifyResourceBaseForm.vue';
+<script lang="js">
+import Form from '@/components/VuetifyResourceBaseForm.vue';
 
-    export default {
-        name: 'user-form',
-        extends: Form,
-    };
+export default {
+    name: 'UserForm',
+    extends: Form,
+    data: () => ({
+        values: {
+            name: '',
+            email: '',
+        },
+    }),
+};
 </script>
diff --git a/generator/templates/Crud/src/mixins/formDataValues.js b/generator/templates/Crud/src/mixins/formDataValues.js
index 54a6a5c..e5e1e25 100644
--- a/generator/templates/Crud/src/mixins/formDataValues.js
+++ b/generator/templates/Crud/src/mixins/formDataValues.js
@@ -2,8 +2,8 @@ export default {
     methods: {
         appendFormData(form_data, values, startKey = '') {
             if (typeof values === 'object') {
-                for (let key in values) {
-                    let currentKey = startKey.length ? startKey + '[' + key + ']' : key;
+                for (const key in values) {
+                    const currentKey = startKey.length ? startKey + '[' + key + ']' : key;
 
                     if (typeof values[key] === 'object' && !(values[key] instanceof File)) {
                         this.appendFormData(form_data, values[key], currentKey);
@@ -14,4 +14,4 @@ export default {
             }
         },
     },
-};
\ No newline at end of file
+};
diff --git a/generator/templates/Crud/src/views/UserResource.vue b/generator/templates/Crud/src/views/UserResource.vue
index 7030391..d69c4d5 100644
--- a/generator/templates/Crud/src/views/UserResource.vue
+++ b/generator/templates/Crud/src/views/UserResource.vue
@@ -1,42 +1,39 @@
 <template>
     <v-container fluid>
         <Resource
-            :create-form-component="() => import('../components/forms/User.vue')"
+            :create-form-component="() => import('../components/forms/UserForm.vue')"
             :meta="{name: 'gebruiker', namePlural: 'gebruikers'}"
             :table-content="tableContent"
-            :update-form-component="() => import('../components/forms/User.vue')"
+            :update-form-component="() => import('../components/forms/UserForm.vue')"
             resource-uri="user"
             can-search
         />
     </v-container>
 </template>
-<script>
-    import Resource from '@/components/Resource.vue';
 
-    export default {
-        components: {Resource},
-        name: 'user-resource',
-        data() {
-            return {
-                tableContent: [
-                    {
-                        text: 'Naam',
-                        align: 'left',
-                        sortable: true,
-                        value: 'name',
-                    },
-                    {
-                        text: 'E-mail',
-                        align: 'left',
-                        sortable: true,
-                        value: 'email',
-                    },
-                ],
-            };
-        },
-    };
-</script>
-
-<style scoped>
+<script lang="js">
+import Resource from '@/components/Resource.vue';
 
-</style>
+export default {
+    components: {Resource},
+    name: 'UserResource',
+    data() {
+        return {
+            tableContent: [
+                {
+                    text: 'Naam',
+                    align: 'left',
+                    sortable: true,
+                    value: 'name',
+                },
+                {
+                    text: 'E-mail',
+                    align: 'left',
+                    sortable: true,
+                    value: 'email',
+                },
+            ],
+        };
+    },
+};
+</script>
diff --git a/generator/templates/Default/src/App.vue b/generator/templates/Default/src/App.vue
index 48ed9ce..c0b1ce4 100644
--- a/generator/templates/Default/src/App.vue
+++ b/generator/templates/Default/src/App.vue
@@ -4,14 +4,8 @@
     </v-app>
 </template>
 
-<script>
-
-    export default {
-        name: 'App',
-        data() {
-            return {
-
-            };
-        },
-    };
+<script lang="js">
+export default {
+    name: 'App',
+};
 </script>
diff --git a/generator/templates/Default/src/Views/PageForbidden.vue b/generator/templates/Default/src/Views/PageForbidden.vue
deleted file mode 100644
index 321fbe0..0000000
--- a/generator/templates/Default/src/Views/PageForbidden.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-    <div class="text-center">
-        <h1>
-            Onjuiste autorisatie
-        </h1>
-        <div class="my-12 title">Je hebt niet voldoende rechten om deze actie uit te mogen voeren</div>
-        <v-btn color="primary" @click="home">Terug naar de homepage</v-btn>
-    </div>
-</template>
-
-<script>
-
-    export default {
-        name: 'page-forbidden',
-        data() {
-            return {};
-        },
-        methods: {
-            home() {
-                this.$router.push({name: 'home'});
-            },
-        },
-    };
-</script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/generator/templates/Default/src/Views/PageNotFound.vue b/generator/templates/Default/src/Views/PageNotFound.vue
deleted file mode 100644
index 13062fd..0000000
--- a/generator/templates/Default/src/Views/PageNotFound.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-    <div class="text-center">
-        <h1>
-            Pagina niet gevonden
-        </h1>
-        <div class="my-12 title">De pagina die u probeert te bereiken is niet gevonden</div>
-        <v-btn color="primary" @click="home">Terug naar de startpagina</v-btn>
-    </div>
-</template>
-
-<script>
-
-    export default {
-        name: 'page-not-found',
-        data() {
-            return {};
-        },
-        methods: {
-            home() {
-                this.$router.push({name: 'home'});
-            }
-        },
-    };
-</script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/generator/templates/Default/src/api/implementation/app/index.js b/generator/templates/Default/src/api/implementation/app/index.js
index 9f0a86f..587b58b 100644
--- a/generator/templates/Default/src/api/implementation/app/index.js
+++ b/generator/templates/Default/src/api/implementation/app/index.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 import {onRequestFulFilled, onRequestRejected, onResponseFulFilled, onResponseRejected} from './interceptor';
-import {destroy, get, getPaginated, post, put} from './wrapper'
+import {getPaginated} from './wrapper';
 
 /**
  * Returns an axios instance
@@ -23,12 +23,17 @@ const instance = axios.create(config);
 instance.interceptors.request.use(onRequestFulFilled, onRequestRejected);
 instance.interceptors.response.use(onResponseFulFilled, onResponseRejected);
 
+const get = axios.get;
+const post = axios.post;
+const destroy = axios.delete;
+const put = axios.put;
+
 export {
-    get,
     getPaginated,
+    get,
     post,
-    put,
     destroy,
-}
+    put,
+};
 
 export default instance;
diff --git a/generator/templates/Default/src/api/implementation/app/interceptor.js b/generator/templates/Default/src/api/implementation/app/interceptor.js
index 06a8ffb..40621e5 100644
--- a/generator/templates/Default/src/api/implementation/app/interceptor.js
+++ b/generator/templates/Default/src/api/implementation/app/interceptor.js
@@ -26,8 +26,8 @@ function onRequestFulFilled(request) {
 
 function computeHeaders() {
     return {
-        Authorization: store.getters['Authorisation/isLoggedIn']
-            ? `Bearer ${store.state.Authorisation.token}`
+        Authorization: store.getters['authorisation/isLoggedIn']
+            ? `Bearer ${store.state.authorisation.token}`
             : undefined,
     };
 }
@@ -50,23 +50,18 @@ function onResponseFulFilled(response) {
  * @param error {AxiosError}
  */
 function onResponseRejected(error) {
+    const response = error.response;
+    const status = response.status;
+    const errors = response.data.errors;
 
-    if (typeof error === 'string' || !error.response) return Promise.reject(error);
-
-    const status = error.response.status;
-
-    const data = error.response.data;
-    /* Now we know there was an error during submitting */
-    if (data.errors && status === 422) {
-        /* For now, all errors will be removed on route change
-        *  We might need to add global errors later on */
-        Object.keys(data.errors).forEach(key => store.commit('Error/add', {
+    if (errors && status === 422) {
+        Object.keys(errors).forEach(key => store.commit('error/add', {
             key: key,
-            message: data.errors[key][0],
+            message: error[key][0],
         }));
     }
 
-    return Promise.reject(error.response);
+    return Promise.reject(error);
 }
 
 export {
diff --git a/generator/templates/Default/src/api/implementation/app/wrapper.js b/generator/templates/Default/src/api/implementation/app/wrapper.js
index f6b8a7e..c26eb7f 100644
--- a/generator/templates/Default/src/api/implementation/app/wrapper.js
+++ b/generator/templates/Default/src/api/implementation/app/wrapper.js
@@ -1,15 +1,17 @@
 import handle from './index';
 
-async function get(url, params = {}) {
-    const result = await handle.get(url, {
-        params: params,
-    });
-
-    return result.data;
-}
-
-async function getPaginated(url, page = 1, perPage = 10, search, sortBy, descending, params) {
-    const result = await handle.get(url, {
+/**
+ * @param url
+ * @param page
+ * @param perPage
+ * @param search
+ * @param sortBy
+ * @param descending
+ * @param params
+ * @return {Promise<AxiosResponse>}
+ */
+function getPaginated(url, page = 1, perPage = 10, search, sortBy, descending, params) {
+    return handle.get(url, {
         params: {
             page: page,
             perPage: perPage,
@@ -20,42 +22,8 @@ async function getPaginated(url, page = 1, perPage = 10, search, sortBy, descend
             ...params,
         },
     });
-
-    return result.data;
-}
-
-async function post(url, data = {}, params = {}) {
-    const result = await handle.post(url, data, {
-        params: params,
-    });
-
-    /* Not all of our post requests will get a body back */
-    if (result.data.data) return result.data;
-
-    return result;
-}
-
-async function put(url, data = {}, params = {}) {
-    const result = await handle.put(url, data, {
-        params: params,
-    });
-
-    /* Not all of our post requests will get a body back */
-    if (result.data.data) return result.data;
-
-    return result;
-}
-
-function destroy(url, params = {}) {
-    return handle.delete(url, {
-        params: params,
-    });
 }
 
 export {
-    get,
     getPaginated,
-    post,
-    put,
-    destroy,
 };
diff --git a/generator/templates/Default/src/api/util/response.js b/generator/templates/Default/src/api/util/response.js
new file mode 100644
index 0000000..d086308
--- /dev/null
+++ b/generator/templates/Default/src/api/util/response.js
@@ -0,0 +1,11 @@
+import dayjs from 'generator/templates/Default/src/plugins/dayJs.js';
+
+function getRateLimitMinutes(response, defaultMinutes = 15) {
+    const timestamp = response.headers['x-ratelimit-reset'] * 1000;
+
+    return dayjs(timestamp).diff(dayjs(), 'minute') || defaultMinutes;
+}
+
+export {
+    getRateLimitMinutes,
+};
diff --git a/generator/templates/Default/src/api/utils/handleTooManyRequestsError.js b/generator/templates/Default/src/api/utils/handleTooManyRequestsError.js
deleted file mode 100644
index d17eaff..0000000
--- a/generator/templates/Default/src/api/utils/handleTooManyRequestsError.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import dayjs from '../../plugins/dayJs.js';
-
-export default function handleTooManyRequestsError(result) {
-    const timestamp = result.headers['x-ratelimit-reset'] * 1000;
-    const minutes = dayjs(timestamp).diff(dayjs(), 'minute') || 15;
-    return {
-        message: `Je hebt te vaak een foutieve login poging gehad. Probeer het over ${minutes} minuten opnieuw.`,
-        success: false,
-    };
-}
diff --git a/generator/templates/Default/src/application/util/url.js b/generator/templates/Default/src/application/util/url.js
new file mode 100644
index 0000000..1f23e8f
--- /dev/null
+++ b/generator/templates/Default/src/application/util/url.js
@@ -0,0 +1,15 @@
+const fragmentRegExp = new RegExp(`[\\#&]${key}=([^&#]*)`);
+
+function getFragment(key, defaultValue = '') {
+    const result = fragmentRegExp.exec(location.hash);
+
+    if (result && result.length >= 2) {
+        return decodeURIComponent(result)[1];
+    }
+
+    return defaultValue;
+}
+
+export {
+    getFragment,
+};
diff --git a/generator/templates/Default/src/components/AppBarMenu.vue b/generator/templates/Default/src/components/AppBarMenu.vue
index 3eb97d6..5b2dd44 100644
--- a/generator/templates/Default/src/components/AppBarMenu.vue
+++ b/generator/templates/Default/src/components/AppBarMenu.vue
@@ -21,13 +21,14 @@
 </template>
 
 <script>
+import {mapActions} from 'vuex';
 
-    export default {
-        name: 'AppBarMenu',
-        methods: {
-            logout() {
-                this.$store.dispatch('Authorisation/logout');
-            }
-        },
-    };
+export default {
+    name: 'AppBarMenu',
+    methods: {
+        ...mapActions({
+            logout: 'Authorisation/logout',
+        }),
+    },
+};
 </script>
diff --git a/generator/templates/Default/src/components/BaseForm.vue b/generator/templates/Default/src/components/BaseForm.vue
index dfec9b3..5c7580e 100644
--- a/generator/templates/Default/src/components/BaseForm.vue
+++ b/generator/templates/Default/src/components/BaseForm.vue
@@ -1,11 +1,13 @@
 <script>
 import store from '../store';
-import Error from '../store/modules/Error';
 
 export default {
     name: 'Form',
-    computed: {
-        hasServerError: () => Error.state.errors.length > 0,
+    props: {
+        errors: {
+            default: () => ({}),
+            type: Object,
+        },
     },
     watch: {
         errors: {
@@ -28,7 +30,7 @@ export default {
             this.$refs.form.reset();
         },
         serverError(key) {
-            const error = store.getters['Error/find'](key);
+            const error = store.getters['error/find'](key);
 
             if (error) {
                 this.removeServerError(key);
@@ -39,7 +41,7 @@ export default {
             return true;
         },
         removeServerError(key) {
-            store.commit('Error/remove', key);
+            store.commit('error/remove', key);
         },
     },
 };
diff --git a/generator/templates/Default/src/components/PaginatedAutocomplete.vue b/generator/templates/Default/src/components/PaginatedAutocomplete.vue
index fa014f8..aa15e4a 100644
--- a/generator/templates/Default/src/components/PaginatedAutocomplete.vue
+++ b/generator/templates/Default/src/components/PaginatedAutocomplete.vue
@@ -2,7 +2,7 @@
     <v-autocomplete v-bind="$attrs"
                     :items="items"
                     :search-input.sync="searchInput"
-                    :loading="loading"
+                    :loading="isLoading"
                     :value="$attrs.value"
                     @change="handleChange"
                     v-if="enabled"
@@ -14,115 +14,123 @@
         </template>
     </v-autocomplete>
 </template>
-<script>
-    export default {
-        name: 'PaginatedAutocomplete',
-        data() {
-            return {
-                items: [],
-                page: 1,
-                lastPage: 1,
-                searchInput: null,
-                loading: true,
-                enabled: true,
-            };
-        },
-        props: {
-            pagination: {
-                type: Object,
-                default() {
-                    return {
-                        url: '',
-                        perPage: 15,
-                    };
-                },
+
+<script lang="js">
+import axios from '../api/implementation/app';
+
+export default {
+    name: 'PaginatedAutocomplete',
+    data() {
+        return {
+            items: [],
+            page: 1,
+            lastPage: 1,
+            searchInput: '',
+            isLoading: true,
+        };
+    },
+    props: {
+        pagination: {
+            type: Object,
+            default() {
+                return {
+                    url: '',
+                    perPage: 15,
+                };
             },
         },
-        watch: {
-            searchInput() {
-                let selectedItemsText = this.items.filter(obj => {
-                    return obj.id === this.$attrs.value;
-                })[0][this.$attrs['item-text']];
-                if(selectedItemsText !== this.searchInput) {
-                    this.getItemsFromApi(this.page, this.searchInput);
-                }
-            },
-            '$attrs.value': {
-                handler() {
-                    this.loadSelectedItemsIfTheyNotExist();
-                },
-                deep: false,
-            },
+    },
+    watch: {
+        searchInput() {
+            const selectedItemsText = this.items.filter(item => item.id === this.$attrs.value)[0][this.$attrs['item-text']];
+
+            if (selectedItemsText !== this.searchInput) {
+                this.getItemsFromApi(this.page, this.searchInput);
+            }
         },
-        computed: {
-            canLoadMoreItems() {
-                return this.page < this.lastPage;
+        '$attrs.value': {
+            handler() {
+                this.loadSelectedItemsIfTheyNotExist();
             },
+            deep: false,
         },
-        created() {
-            this.reload();
+    },
+    computed: {
+        canLoadMoreItems: vm => vm.page < vm.lastPage,
+        selectedIds: vm => {
+            const value = vm.$attrs.value;
+
+            if (!value) return [];
+
+            return Array.isArray(value) ? value : [value];
         },
-        methods: {
-            getItemsFromApi(page, searchInput) {
-                this.loading = true;
-                this.$http.get(this.pagination.url + '?perPage=' + this.pagination.perPage + '&page=' + page + '&q=' + (searchInput || '')).then((response) => {
-                    response.data.data = response.data.data.map(obj => this.mapItems(obj));
-
-                    this.items = [...this.items, ...response.data.data];
-                    this.page = response.data.meta.current_page;
-                    this.lastPage = response.data.meta.last_page;
-                    this.loading = false;
-                });
+    },
+    created() {
+        this.reload();
+    },
+    methods: {
+        getItemsFromApi(page, searchInput) {
+            this.isLoading = true;
 
-            },
-            // load selected items first
-            getSelectedItems() {
-                let ids = this.$attrs.value;
-                if (typeof ids === 'undefined' || ids === null) {
-                    return;
-                }
-                if (typeof ids === 'number') {
-                    ids = [ids];
-                }
-                this.$http.get(this.pagination.url + '?only=' + ids.join() + '&perPage=' + ids.length).then((response) => {
-                    response.data.data = response.data.data.map(obj => this.mapItems(obj));
-                    this.items = [...this.items, ...response.data.data];
-                });
-            },
-            handleChange(value) {
-                this.$emit('input', value);
-            },
-            mapItems(obj) {
-                return {
-                    [this.$attrs['item-text']]: obj[this.$attrs['item-text']],
-                    [this.$attrs['item-value']]: obj[this.$attrs['item-value']],
-                };
-            },
-            reload() {
-                this.items = [];
-                this.getSelectedItems();
-                this.getItemsFromApi(1);
-            },
-            loadSelectedItemsIfTheyNotExist() {
-                let ids = this.$attrs.value;
-                if (typeof ids === 'undefined' || ids === null) {
-                    return;
-                }
-                if (typeof ids === 'number') {
-                    ids = [ids];
-                }
-                ids.forEach((value) => {
-                    let found = this.items.find((obj) => {
-                        return obj.id === value;
-                    });
-                    if (typeof found === 'undefined') {
-                        this.getSelectedItems();
-                        return;
-                    }
-                });
-            },
+            axios.get(`${this.pagination.url}?perPage=${this.pagination.perPage}page=${page}&q=${searchInput}`)
+                .then(response => {
+                    const axiosData = response.data;
+
+                    axiosData.data = response.data.data.map(obj => this.mapItems(obj));
+                    this.items = [...this.items, ...axiosData.data];
+
+                    const meta = axiosData.meta;
+                    this.page = meta.currentPage;
+                    this.lastPage = meta.lastPage;
+                })
+                .finally(() => this.isLoading = false);
+        },
+        getSelectedItems() {
+            const ids = this.selectedIds;
+
+            if (!ids.length) return;
+
+            this.isLoading = true;
+
+            axios.get(`${this.pagination.url}?only=${ids.join()}&perPage=${ids.length}`)
+                .then(response => {
+                    const axiosData = response.data;
+
+                    axiosData.data = axiosData.data.map(obj => this.mapItems(obj));
+                    this.items = [...this.items, ...axiosData.data];
+                })
+                .finally(() => this.isLoading = false);
+        },
+        handleChange(value) {
+            this.$emit('input', value);
+        },
+        mapItems(obj) {
+            const itemText = this.$attrs['item-text'];
+            const itemValue = this.$attrs['item-value'];
+
+            return {
+                [itemText]: obj[itemText],
+                [itemValue]: obj[itemValue],
+            };
+        },
+        reload() {
+            this.items = [];
+            this.getSelectedItems();
+            this.getItemsFromApi(1);
+        },
+        loadSelectedItemsIfTheyNotExist() {
+            const ids = this.selectedIds;
+
+            if (!ids.length) return;
+
+            ids.forEach(value => {
+                const item = this.items.find(item => item.id === value);
+
+                if (!item) this.getSelectedItems();
+            });
         },
-    };
+    },
+};
 </script>
 
 <style scoped>
diff --git a/generator/templates/Default/src/components/menu/MainMenu.vue b/generator/templates/Default/src/components/menu/MainMenu.vue
new file mode 100644
index 0000000..6810393
--- /dev/null
+++ b/generator/templates/Default/src/components/menu/MainMenu.vue
@@ -0,0 +1,17 @@
+<script lang="js">
+import Menu from './Menu.vue';
+
+export default {
+    name: 'MainMenu',
+    extends: Menu,
+    computed: {
+        items: () => [
+            {
+                icon: 'fa-users',
+                title: 'Gebruikers',
+                route: {name: 'users'},
+            },
+        ],
+    },
+};
+</script>
diff --git a/generator/templates/Default/src/components/MainMenu.vue b/generator/templates/Default/src/components/menu/Menu.vue
similarity index 57%
rename from generator/templates/Default/src/components/MainMenu.vue
rename to generator/templates/Default/src/components/menu/Menu.vue
index e96ee52..2d7ae4d 100644
--- a/generator/templates/Default/src/components/MainMenu.vue
+++ b/generator/templates/Default/src/components/menu/Menu.vue
@@ -1,71 +1,52 @@
 <template>
     <v-list>
-        <div
-            :key="index"
-            v-for="(item, index) in items">
-            <v-list-group
+        <div :key="item.title" v-for="item in items">
+            <v-list-item-group
                 :disabled="item.disabled"
                 :prepend-icon="item.icon"
-                no-icon
-                v-if="typeof item.items !== 'undefined'"
-                v-model="item.active"
-            >
-                <v-list-item slot="activator">
+                no-action
+                v-if="!!item.items.length"
+                v-model="item.active">
+                <template slot="activator">
                     <v-list-item-content>
                         <v-list-item-title>{{ item.title }}</v-list-item-title>
                     </v-list-item-content>
-                </v-list-item>
-
+                </template>
                 <v-list-item
+                    v-for="subItem in item.items"
                     :key="subItem.title"
                     :to="subItem.route"
-
-                    v-for="subItem in item.items"
-                    :value="$route.name === subItem.route"
-                >
-                    <v-list-item-action>
+                    :value="$route.name === subItem.route">
+                    s very large so the tab took a large<v-list-item-action>
                         <v-icon>{{ subItem.icon }}</v-icon>
                     </v-list-item-action>
                     <v-list-item-content>
                         <v-list-item-title>{{ subItem.title }}</v-list-item-title>
                     </v-list-item-content>
-
                 </v-list-item>
-            </v-list-group>
+            </v-list-item-group>
             <v-list-item
                 :to="item.route"
                 v-else
-                :value="$route.name === item.route"
-            >
+                :value="$route.name === item.route">
                 <v-list-item-action>
                     <v-icon>{{ item.icon }}</v-icon>
                 </v-list-item-action>
                 <v-list-item-content>
                     <v-list-item-title>{{ item.title }}</v-list-item-title>
                 </v-list-item-content>
-
             </v-list-item>
         </div>
-
     </v-list>
 </template>
 
 <script>
-    export default {
-        name: 'MainMenu',
-        data() {
-            return {
-                items: [
-                    {
-                        icon: 'fa-users',
-                        title: 'Gebruikers',
-                        route: {name: 'users'},
-                    }
-
-                ]
-            };
-        },
-    };
+export default {
+    name: 'Menu',
+    computed: {
+        items: () => [],
+    },
+};
 </script>
 
 <style scoped>
diff --git a/generator/templates/Default/src/router/index.js b/generator/templates/Default/src/router/index.js
index 053e198..581c88e 100644
--- a/generator/templates/Default/src/router/index.js
+++ b/generator/templates/Default/src/router/index.js
@@ -82,7 +82,5 @@ export default new Router({
                 },
             ],
         },
-
-
     ],
 });
diff --git a/generator/templates/Default/src/store/index.js b/generator/templates/Default/src/store/index.js
index 63bc066..c687acd 100644
--- a/generator/templates/Default/src/store/index.js
+++ b/generator/templates/Default/src/store/index.js
@@ -1,7 +1,5 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-
-import createPersistedState from 'vuex-persistedstate';
 /* MODULES */
 import Authorisation from './modules/Authorisation';
 import Error from './modules/Error';
@@ -10,11 +8,8 @@ import Error from './modules/Error';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-    plugins: [
-        createPersistedState(),
-    ],
     modules: {
-        Authorisation,
-        Error,
+        authorisation: Authorisation,
+        error: Error,
     },
 });
diff --git a/generator/templates/Default/src/store/modules/Authorisation.js b/generator/templates/Default/src/store/modules/Authorisation.js
index cbfccf4..cd687eb 100644
--- a/generator/templates/Default/src/store/modules/Authorisation.js
+++ b/generator/templates/Default/src/store/modules/Authorisation.js
@@ -1,7 +1,12 @@
 import router from '../../router';
 
+import createPersistedState from 'vuex-persistedstate';
+
 export default {
     namespaced: true,
+    plugins: [
+        createPersistedState(),
+    ],
     state: {
         token: '',
     },
diff --git a/generator/templates/Default/src/store/modules/Error.js b/generator/templates/Default/src/store/modules/Error.js
index 871cc91..dc2b142 100644
--- a/generator/templates/Default/src/store/modules/Error.js
+++ b/generator/templates/Default/src/store/modules/Error.js
@@ -25,7 +25,6 @@ export default {
 
             return error ? error.message : '';
         },
-        hasError: state => !!state.errors.length,
         first: state => {
             if (!state.errors.length)
                 return '';
diff --git a/generator/templates/Default/src/templates/Default.vue b/generator/templates/Default/src/templates/Default.vue
index e74fb01..7689fd7 100644
--- a/generator/templates/Default/src/templates/Default.vue
+++ b/generator/templates/Default/src/templates/Default.vue
@@ -3,18 +3,18 @@
         <v-navigation-drawer
             app
             fixed
-            v-model="menu"
+            v-model="isMenuOpen"
         >
             <router-link :to="{name: 'home'}">
                 <img :src="require('../assets/logo.png')" class="logo">
             </router-link>
             <v-divider class="mt-10"/>
-            <main-menu/>
+            <MainMenu/>
         </v-navigation-drawer>
         <v-app-bar app color="primary" dark mfixed>
-            <v-app-bar-nav-icon @click.stop="menu = !menu"></v-app-bar-nav-icon>
+            <v-app-bar-nav-icon @click.stop="isMenuOpen = !isMenuOpen"></v-app-bar-nav-icon>
             <v-toolbar-title>Beheer</v-toolbar-title>
-            <v-spacer/>
+            <VSpacer/>
             <AppBarMenu/>
         </v-app-bar>
         <v-main>
@@ -28,15 +28,18 @@
 
 <script>
 import AppBarMenu from '../components/AppBarMenu.vue';
-import MainMenu from './../components/MainMenu.vue';
+import MainMenu from './../components/menu/MainMenu.vue';
 import {mapGetters} from 'vuex';
 
 export default {
-    name: 'template-default',
-    components: {AppBarMenu, MainMenu},
+    name: 'Default',
+    components: {
+        AppBarMenu,
+        MainMenu,
+    },
     data() {
         return {
-            menu: true,
+            isMenuOpen: true,
         };
     },
     computed: {
@@ -44,9 +47,11 @@ export default {
             isLoggedIn: 'Authorisation/isLoggedIn',
         }),
     },
-    beforeCreate() {
-        if (!this.$store.getters['Authorisation/isLoggedIn']) {
-            this.$router.push({name: 'login'});
+    created() {
+        if (!this.isLoggedIn) {
+            this.$router.push({
+                name: 'login',
+            });
         }
     },
 };
@@ -61,6 +66,7 @@ export default {
     cursor: pointer;
 }
 </style>
+
 <style lang="scss">
 .v-dialog--fullscreen > .v-card.v-sheet.theme--light {
     background: rgb(248, 249, 250);
diff --git a/generator/templates/Default/src/views/Home.vue b/generator/templates/Default/src/views/Home.vue
index 918236f..eb47b2a 100644
--- a/generator/templates/Default/src/views/Home.vue
+++ b/generator/templates/Default/src/views/Home.vue
@@ -5,23 +5,8 @@
     </div>
 </template>
 
-<script>
-
-    export default {
-        components: {},
-        watch: {},
-        props: [],
-        name: 'home',
-        data() {
-            return {};
-        },
-        created() {
-
-        },
-        methods: {},
-    };
+<script lang="js">
+export default {
+    name: 'Home',
+};
 </script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/generator/templates/Default/src/views/PageForbidden.vue b/generator/templates/Default/src/views/PageForbidden.vue
new file mode 100644
index 0000000..f03d014
--- /dev/null
+++ b/generator/templates/Default/src/views/PageForbidden.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="text-center">
+        <h1>Onjuiste autorisatie</h1>
+        <div class="my-12 title">Je hebt niet voldoende rechten om deze actie uit te mogen voeren</div>
+        <v-btn color="primary" :to="{name: 'home'}">Terug naar de homepage</v-btn>
+    </div>
+</template>
+
+<script lang="js">
+export default {
+    name: 'PageForbidden',
+};
+</script>
diff --git a/generator/templates/Default/src/views/PageNotFound.vue b/generator/templates/Default/src/views/PageNotFound.vue
new file mode 100644
index 0000000..f82d218
--- /dev/null
+++ b/generator/templates/Default/src/views/PageNotFound.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="text-center">
+        <h1>Pagina niet gevonden</h1>
+        <div class="my-12 title">De pagina die u probeert te bereiken is niet gevonden</div>
+        <v-btn color="primary" :to="{name: 'home'}">Terug naar de startpagina</v-btn>
+    </div>
+</template>
+
+<script lang="js">
+export default {
+    name: 'PageNotFound',
+};
+</script>
diff --git a/generator/templates/Plugins/sentry/src/plugins/sentry.js b/generator/templates/Plugins/sentry/src/plugins/sentry.js
index 07f31a9..863e0c4 100644
--- a/generator/templates/Plugins/sentry/src/plugins/sentry.js
+++ b/generator/templates/Plugins/sentry/src/plugins/sentry.js
@@ -1,12 +1,12 @@
-import * as Sentry from '@sentry/browser';
-import * as Integrations from '@sentry/integrations';
+import {init} from '@sentry/browser';
+import {Vue as SentryVue} from '@sentry/integrations';
 import Vue from 'vue';
 
 if (process.env.VUE_APP_SENTRY) {
-    Sentry.init({
+    init({
         environment: process.env.VUE_APP_ENV,
         release: process.env.VUE_APP_RELEASE,
         dsn: process.env.VUE_APP_SENTRY,
-        integrations: [new Integrations.Vue({Vue, attachProps: true})],
+        integrations: [new SentryVue({Vue, attachProps: true})],
     });
 }
diff --git a/prompts.js b/prompts.js
index 4d4917e..3b757a0 100644
--- a/prompts.js
+++ b/prompts.js
@@ -29,8 +29,8 @@ module.exports = [
         message: 'Which plugins should we install for you?',
         choices: [
             {
-                value: 'sentry',
-                name: 'error logging with sentry',
+                value: 'Sentry',
+                name: 'error logging with Sentry',
                 checked: true,
             },
             {
@@ -40,7 +40,7 @@ module.exports = [
             },
             {
                 value: 'fontawesomepro',
-                name: 'Font awesome pro',
+                name: 'FontAwesome Pro',
                 checked: false,
             },
         ],

From 3943a7859cf83cd064d0c59fa7bebfdf8e617199 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Tue, 14 Jul 2020 16:50:00 +0200
Subject: [PATCH 02/33] Form data send empty string on null

---
 .../templates/Default/src/api/util/objectToFormDataConverter.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/generator/templates/Default/src/api/util/objectToFormDataConverter.js b/generator/templates/Default/src/api/util/objectToFormDataConverter.js
index 43b0539..342d421 100644
--- a/generator/templates/Default/src/api/util/objectToFormDataConverter.js
+++ b/generator/templates/Default/src/api/util/objectToFormDataConverter.js
@@ -33,6 +33,8 @@ function convert(obj, data, parent) {
             convert(val, data, finalName);
         else if (typeof val === 'boolean')
             data.append(finalName, val ? '1' : '0');
+        else if (val === null || val === '')
+            data.append(finalName, '');
         else if (val !== undefined)
             data.append(finalName, val);
     });

From c41029828a025ec0fbf104326755ca0f1d074f37 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Tue, 14 Jul 2020 17:00:29 +0200
Subject: [PATCH 03/33] Form data send empty string on null

---
 .../Default/src/api/util/objectToFormDataConverter.js         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/generator/templates/Default/src/api/util/objectToFormDataConverter.js b/generator/templates/Default/src/api/util/objectToFormDataConverter.js
index 342d421..f5f467d 100644
--- a/generator/templates/Default/src/api/util/objectToFormDataConverter.js
+++ b/generator/templates/Default/src/api/util/objectToFormDataConverter.js
@@ -33,9 +33,9 @@ function convert(obj, data, parent) {
             convert(val, data, finalName);
         else if (typeof val === 'boolean')
             data.append(finalName, val ? '1' : '0');
-        else if (val === null || val === '')
+        else if (val === '')
             data.append(finalName, '');
-        else if (val !== undefined)
+        else if (val)
             data.append(finalName, val);
     });
 

From 886dde40d3167871484cd46188314d8b3a5554f8 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Thu, 16 Jul 2020 11:31:57 +0200
Subject: [PATCH 04/33] Add Verify.vue

---
 .../src/templates/Authorisation.vue           |   2 +-
 .../Authorisation/src/views/Verify.vue        | 115 ++++++++++++++++++
 .../src/api/implementation/app/wrapper.js     |   1 -
 .../src/api/util/objectToFormDataConverter.js |  10 +-
 .../Default/src/application/util/url.js       |   2 +-
 .../templates/Default/src/router/index.js     |   5 +
 .../templates/Default/src/store/index.js      |   4 +-
 .../{Authorisation.js => authorisation.js}    |   0
 .../src/store/modules/{Error.js => error.js}  |   0
 9 files changed, 129 insertions(+), 10 deletions(-)
 create mode 100644 generator/templates/Authorisation/src/views/Verify.vue
 rename generator/templates/Default/src/store/modules/{Authorisation.js => authorisation.js} (100%)
 rename generator/templates/Default/src/store/modules/{Error.js => error.js} (100%)

diff --git a/generator/templates/Authorisation/src/templates/Authorisation.vue b/generator/templates/Authorisation/src/templates/Authorisation.vue
index 2c4e046..c612ed8 100644
--- a/generator/templates/Authorisation/src/templates/Authorisation.vue
+++ b/generator/templates/Authorisation/src/templates/Authorisation.vue
@@ -1,6 +1,6 @@
 <template>
     <v-main>
-        <v-container fluid fill-height class="primary">
+        <v-container fluid class="fill-height primary">
             <router-view/>
         </v-container>
     </v-main>
diff --git a/generator/templates/Authorisation/src/views/Verify.vue b/generator/templates/Authorisation/src/views/Verify.vue
new file mode 100644
index 0000000..7362490
--- /dev/null
+++ b/generator/templates/Authorisation/src/views/Verify.vue
@@ -0,0 +1,115 @@
+<template>
+    <v-row justify-md="center" align="stretch">
+        <v-col md="3">
+            <v-card height="100%">
+                <v-form @submit.prevent="onFormSubmit()" ref="form" v-model="isValid">
+                    <v-card-title class="title">Ik wil een account aanvragen</v-card-title>
+                    <v-card-text>
+                        <v-alert
+                            text
+                            :value="!!alertMessage.length"
+                            transition="fade-transition"
+                            :type="alertType"
+                        >
+                            {{alertMessage}}
+                        </v-alert>
+                        <VTextField
+                            label="E-mailadres"
+                            v-model="form.email"
+                            filled
+                            :rules="[(v) => !!v || 'E-mailadres is verplicht', () => serverError('email')]"
+                            tabindex="0"
+                        />
+                        <VTextField
+                            label="Wachtwoord"
+                            filled
+                            :append-icon="showPassword ? 'far fa-eye-slash' : 'far fa-eye'"
+                            :rules="[(v) => !!v || 'Wachtwoord is verplicht', () => serverError('password')]"
+                            :type="showPassword ? 'text' : 'password'"
+                            @click:append="showPassword = !showPassword"
+                            v-model="form.password"
+                            tabindex="1"
+                        />
+                        <VTextField
+                            label="Wachtwoord nogmaals"
+                            filled
+                            :append-icon="showPassword ? 'far fa-eye-slash' : 'far fa-eye'"
+                            :rules="[(v) => !!v || 'Wachtwoord is verplicht', (v) => v === form.password || 'Wachtwoorden komen niet overeen', () => serverError('passwordConfirmation')]"
+                            :type="showPassword ? 'text' : 'password'"
+                            @click:append="showPassword = !showPassword"
+                            v-model="form.passwordConfirmation"
+                            tabindex="2"
+                        />
+                    </v-card-text>
+                    <v-card-actions>
+                        <VSpacer/>
+                        <v-btn tabindex="12" type="submit" color="primary" :loading="isLoading">Instellen</v-btn>
+                    </v-card-actions>
+                </v-form>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
+
+<script>
+import BaseForm from '../../components/BaseForm.vue';
+import {getRateLimitMinutes} from '../../api/util/response.js';
+import {verify} from '../../api/endpoints/authorisation/register.js';
+import {getFragment} from 'generator/templates/Default/src/application/util/url.js';
+
+export default {
+    name: 'Verify',
+    extends: BaseForm,
+    data() {
+        return {
+            form: {
+                email: '',
+            },
+            isLoading: false,
+            alertType: 'success',
+            alertMessage: '',
+            valid: true,
+            showPassword: false,
+        };
+    },
+    created() {
+        this.form.email = getFragment('email');
+    },
+    methods: {
+        onFormSubmit() {
+            const token = getFragment('token');
+
+            if (!token) return; // what to do?
+
+            this.isLoading = true;
+
+            verify(token, this.form.email, this.form.password, this.form.passwordConfirmation).then(() => {
+                    this.alertMessage = 'Je account is geactiveerd, je kunt nu inloggen.';
+                    this.alertType = 'success';
+                })
+                .catch(error => {
+                    const response = error.response;
+                    const status = response.status;
+
+                    if (status === 429) {
+                        this.alertMessage = `Je hebt te vaak een foutieve activatie poging gedaan.
+                         Probeer het over ${getRateLimitMinutes(response)} minuten opnieuw`;
+                        this.alertType = 'error';
+                        return;
+                    } else if (status === 400) {
+                        this.alertMessage = 'De verificatie is verlopen, vraag opnieuw een wachtwoord aan via de wachtwoord vergeten optie.';
+                        this.alertType = 'error';
+                        return;
+                    }
+                    this.alertMessage = 'Niet alle velden zijn juist ingevuld';
+                    this.alertType = 'error';
+                    this.validate();
+                })
+                .finally(() => {
+                    this.isLoading = false;
+                });
+        },
+    },
+};
+</script>
+=
diff --git a/generator/templates/Default/src/api/implementation/app/wrapper.js b/generator/templates/Default/src/api/implementation/app/wrapper.js
index c26eb7f..7d85772 100644
--- a/generator/templates/Default/src/api/implementation/app/wrapper.js
+++ b/generator/templates/Default/src/api/implementation/app/wrapper.js
@@ -15,7 +15,6 @@ function getPaginated(url, page = 1, perPage = 10, search, sortBy, descending, p
         params: {
             page: page,
             perPage: perPage,
-            /* undefined to exclude them out of the request */
             search: search ? search : undefined,
             sortBy: sortBy ? sortBy : undefined,
             desc: typeof descending === 'undefined' ? undefined : (descending ? '1' : '0'),
diff --git a/generator/templates/Default/src/api/util/objectToFormDataConverter.js b/generator/templates/Default/src/api/util/objectToFormDataConverter.js
index f5f467d..ee6efcb 100644
--- a/generator/templates/Default/src/api/util/objectToFormDataConverter.js
+++ b/generator/templates/Default/src/api/util/objectToFormDataConverter.js
@@ -1,11 +1,11 @@
-function isObject(input) {
+function isIterableObject(input) {
     return typeof input === 'object' && input !== null && !(input instanceof Blob) && !(input instanceof Date);
 }
 
 function objectToFormData(obj) {
     const data = new FormData();
 
-    if (!isObject(obj)) return data;
+    if (!isIterableObject(obj)) return data;
 
     return convert(obj, data);
 }
@@ -18,7 +18,7 @@ function convert(obj, data, parent) {
         if (parent) {
             if (Array.isArray(obj))
                 finalName = `${parent}[${i}]`;
-            else if (isObject(obj))
+            else if (isIterableObject(obj))
                 finalName = `${parent}[${key}]`;
         }
 
@@ -29,13 +29,13 @@ function convert(obj, data, parent) {
         else if (val instanceof FileList)
             for (let x = 0; x < val.length; x++)
                 data.append(`${finalName}[${x}]`, val.item(x));
-        else if (isObject(val))
+        else if (isIterableObject(val))
             convert(val, data, finalName);
         else if (typeof val === 'boolean')
             data.append(finalName, val ? '1' : '0');
         else if (val === '')
             data.append(finalName, '');
-        else if (val)
+        else if (val || typeof val === 'number')
             data.append(finalName, val);
     });
 
diff --git a/generator/templates/Default/src/application/util/url.js b/generator/templates/Default/src/application/util/url.js
index 1f23e8f..b6add0c 100644
--- a/generator/templates/Default/src/application/util/url.js
+++ b/generator/templates/Default/src/application/util/url.js
@@ -4,7 +4,7 @@ function getFragment(key, defaultValue = '') {
     const result = fragmentRegExp.exec(location.hash);
 
     if (result && result.length >= 2) {
-        return decodeURIComponent(result)[1];
+        return decodeURIComponent(result[1]);
     }
 
     return defaultValue;
diff --git a/generator/templates/Default/src/router/index.js b/generator/templates/Default/src/router/index.js
index 581c88e..18fdb5e 100644
--- a/generator/templates/Default/src/router/index.js
+++ b/generator/templates/Default/src/router/index.js
@@ -44,6 +44,11 @@ export default new Router({
                     name: 'invitation.accept',
                     component: () => import('@/views/InvitationAccept.vue'),
                 },
+                {
+                    path: '/registration/verify',
+                    name: 'registration.verify',
+                    component: () => import('@/views/Authorisation/Verify.vue'),
+                },
             ]
         },
          <%_ } _%>
diff --git a/generator/templates/Default/src/store/index.js b/generator/templates/Default/src/store/index.js
index c687acd..7a70d77 100644
--- a/generator/templates/Default/src/store/index.js
+++ b/generator/templates/Default/src/store/index.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 /* MODULES */
-import Authorisation from './modules/Authorisation';
-import Error from './modules/Error';
+import Authorisation from './modules/authorisation';
+import Error from './modules/error';
 /* END MODULES */
 
 Vue.use(Vuex);
diff --git a/generator/templates/Default/src/store/modules/Authorisation.js b/generator/templates/Default/src/store/modules/authorisation.js
similarity index 100%
rename from generator/templates/Default/src/store/modules/Authorisation.js
rename to generator/templates/Default/src/store/modules/authorisation.js
diff --git a/generator/templates/Default/src/store/modules/Error.js b/generator/templates/Default/src/store/modules/error.js
similarity index 100%
rename from generator/templates/Default/src/store/modules/Error.js
rename to generator/templates/Default/src/store/modules/error.js

From 6bc5044547351324595f30397c9019b68bf93ec0 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Thu, 16 Jul 2020 14:38:29 +0200
Subject: [PATCH 05/33] Fix imports

---
 generator/index.js                            |  3 ++-
 .../api/endpoints/authorisation/register.js   | 18 +++++++++++--
 .../components/Authorisation/RegisterCard.vue |  4 +--
 .../src/views/InvitationAccept.vue            |  2 +-
 .../src/views/PasswordForgotten.vue           |  1 -
 .../Authorisation/src/views/Verify.vue        |  8 +++---
 .../Crud/src/components/forms/UserForm.vue    |  6 ++---
 .../src/api/implementation/app/index.js       |  4 +++
 .../src/api/implementation/app/transformer.js | 26 ++++++++++++++++---
 .../Default/src/api/util/response.js          |  2 +-
 .../Default/src/application/util/url.js       |  3 +--
 .../Default/src/components/BaseForm.vue       | 15 ++++++++---
 .../templates/Default/src/models/model.js     | 13 ++++++++++
 .../templates/Default/src/models/user.js      | 15 +++++++++++
 .../templates/Default/src/plugins/vuetify.js  |  1 -
 .../templates/Default/src/router/index.js     |  2 +-
 .../Default/src/templates/Default.vue         |  2 +-
 package.json                                  |  3 ++-
 18 files changed, 100 insertions(+), 28 deletions(-)
 create mode 100644 generator/templates/Default/src/models/model.js
 create mode 100644 generator/templates/Default/src/models/user.js

diff --git a/generator/index.js b/generator/index.js
index 8e2e933..619ae8d 100644
--- a/generator/index.js
+++ b/generator/index.js
@@ -10,6 +10,7 @@ module.exports = (api, options) => {
             'vuex-persistedstate': '^2.5.4',
             'lodash.clonedeep': '^4.5.0',
             'css-vars-ponyfill': '^2.1.2',
+            'qs': '^6.9.4',
             'vue-router': '3.3.4',
         },
     });
@@ -24,7 +25,7 @@ module.exports = (api, options) => {
     if (options.useCrud) {
         api.extendPackage({
             dependencies: {
-                '@kingscode/vuetify-resource': '^1.4.1',
+                '@kingscode/vuetify-resource': '^2.0.3',
             },
         });
         api.render('./templates/Crud', options);
diff --git a/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js b/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js
index 800b5e9..7b1d2d4 100644
--- a/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js
+++ b/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js
@@ -1,7 +1,21 @@
 import {post} from '../../implementation/app';
 
-export default function (email, name) {
+function register(email, name, code) {
     return post('registration', {
-        email, name,
+        email, name, code,
     });
 }
+
+function verify(token, email, password, passwordConfirmation) {
+    return post('registration/verify', {
+        token: token,
+        email: email,
+        password: password,
+        password_confirmation: passwordConfirmation,
+    });
+}
+
+export {
+    register,
+    verify,
+};
diff --git a/generator/templates/Authorisation/src/components/Authorisation/RegisterCard.vue b/generator/templates/Authorisation/src/components/Authorisation/RegisterCard.vue
index 5626fb0..bda3a0e 100644
--- a/generator/templates/Authorisation/src/components/Authorisation/RegisterCard.vue
+++ b/generator/templates/Authorisation/src/components/Authorisation/RegisterCard.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import RegisterRequest from '../../api/endpoints/authorisation/register.js';
+import {register} from '../../api/endpoints/authorisation/register.js';
 
 export default {
     name: 'RegisterCard',
@@ -59,7 +59,7 @@ export default {
             this.alertType = 'error';
             this.alertMessage = '';
 
-            RegisterRequest(this.form.email, this.form.name)
+            register(this.form.email, this.form.name)
                 .then(() => {
                     this.alertType = 'success';
                     this.alertMessage = 'Er is een account aangemaakt, controleer je e-mail om een wachtwoord te kiezen zodat je vervolgens kunt inloggen.';
diff --git a/generator/templates/Authorisation/src/views/InvitationAccept.vue b/generator/templates/Authorisation/src/views/InvitationAccept.vue
index 436225e..7788ba9 100644
--- a/generator/templates/Authorisation/src/views/InvitationAccept.vue
+++ b/generator/templates/Authorisation/src/views/InvitationAccept.vue
@@ -53,7 +53,7 @@
 
 <script lang="js">
 import axios from '../api/implementation/app';
-import {mapGetters} from 'vuex;';
+import {mapGetters} from 'vuex';
 
 export default {
     name: 'InvitationAccept',
diff --git a/generator/templates/Authorisation/src/views/PasswordForgotten.vue b/generator/templates/Authorisation/src/views/PasswordForgotten.vue
index adc7704..7c91d38 100644
--- a/generator/templates/Authorisation/src/views/PasswordForgotten.vue
+++ b/generator/templates/Authorisation/src/views/PasswordForgotten.vue
@@ -7,7 +7,6 @@
 </template>
 
 <script>
-
     import PasswordForgottenCard from '../components/Authorisation/PasswordForgottenCard.vue';
     export default {
         name: 'PasswordForgotten',
diff --git a/generator/templates/Authorisation/src/views/Verify.vue b/generator/templates/Authorisation/src/views/Verify.vue
index 7362490..36befd5 100644
--- a/generator/templates/Authorisation/src/views/Verify.vue
+++ b/generator/templates/Authorisation/src/views/Verify.vue
@@ -52,10 +52,10 @@
 </template>
 
 <script>
-import BaseForm from '../../components/BaseForm.vue';
-import {getRateLimitMinutes} from '../../api/util/response.js';
-import {verify} from '../../api/endpoints/authorisation/register.js';
-import {getFragment} from 'generator/templates/Default/src/application/util/url.js';
+import BaseForm from '../components/BaseForm.vue';
+import {getRateLimitMinutes} from '../api/util/response.js';
+import {verify} from '../api/endpoints/authorisation/register.js';
+import {getFragment} from '../application/util/url.js';
 
 export default {
     name: 'Verify',
diff --git a/generator/templates/Crud/src/components/forms/UserForm.vue b/generator/templates/Crud/src/components/forms/UserForm.vue
index 00a93df..61d8475 100644
--- a/generator/templates/Crud/src/components/forms/UserForm.vue
+++ b/generator/templates/Crud/src/components/forms/UserForm.vue
@@ -25,15 +25,13 @@
 
 <script lang="js">
 import Form from '@/components/VuetifyResourceBaseForm.vue';
+import User from '../../models/user.js';
 
 export default {
     name: 'UserForm',
     extends: Form,
     data: () => ({
-        values: {
-            name: '',
-            email: '',
-        },
+        values: new User(),
     }),
 };
 </script>
diff --git a/generator/templates/Default/src/api/implementation/app/index.js b/generator/templates/Default/src/api/implementation/app/index.js
index 587b58b..2b1a305 100644
--- a/generator/templates/Default/src/api/implementation/app/index.js
+++ b/generator/templates/Default/src/api/implementation/app/index.js
@@ -2,6 +2,7 @@ import axios from 'axios';
 
 import {onRequestFulFilled, onRequestRejected, onResponseFulFilled, onResponseRejected} from './interceptor';
 import {getPaginated} from './wrapper';
+import {transformParams, transformRequest, transformResponse} from './transformer';
 
 /**
  * Returns an axios instance
@@ -16,6 +17,9 @@ const config = {
     headers: {
         Accept: 'application/json',
     },
+    transformRequest: [transformRequest],
+    transformResponse: [transformResponse],
+    paramsSerializer: transformParams,
 };
 
 const instance = axios.create(config);
diff --git a/generator/templates/Default/src/api/implementation/app/transformer.js b/generator/templates/Default/src/api/implementation/app/transformer.js
index d0c78b0..2711048 100644
--- a/generator/templates/Default/src/api/implementation/app/transformer.js
+++ b/generator/templates/Default/src/api/implementation/app/transformer.js
@@ -1,8 +1,10 @@
-import {snakeToCamel} from '../../../util/keyConverter';
+import {camelToSnake, snakeToCamel} from '../../util/keyConverter';
+import objectToFormData from '../../util/objectToFormDataConverter.js';
+import Qs from 'qs';
 
 /**
- * @param response {}
- * @returns {{}, string}
+ * @param response
+ * @returns {{}}
  */
 function transformResponse(response) {
     if (typeof response === 'string' && response.length > 0) {
@@ -17,6 +19,24 @@ function transformResponse(response) {
     return response;
 }
 
+/**
+ * @param data
+ * @return {FormData}
+ */
+function transformRequest(data) {
+    if (data) {
+        data = camelToSnake(data);
+    }
+
+    return objectToFormData(data);
+}
+
+function transformParams(params) {
+    return Qs.stringify(camelToSnake(params));
+}
+
 export {
     transformResponse,
+    transformRequest,
+    transformParams,
 };
diff --git a/generator/templates/Default/src/api/util/response.js b/generator/templates/Default/src/api/util/response.js
index d086308..41e9240 100644
--- a/generator/templates/Default/src/api/util/response.js
+++ b/generator/templates/Default/src/api/util/response.js
@@ -1,4 +1,4 @@
-import dayjs from 'generator/templates/Default/src/plugins/dayJs.js';
+import dayjs from '../../plugins/dayJs.js';
 
 function getRateLimitMinutes(response, defaultMinutes = 15) {
     const timestamp = response.headers['x-ratelimit-reset'] * 1000;
diff --git a/generator/templates/Default/src/application/util/url.js b/generator/templates/Default/src/application/util/url.js
index b6add0c..2448455 100644
--- a/generator/templates/Default/src/application/util/url.js
+++ b/generator/templates/Default/src/application/util/url.js
@@ -1,6 +1,5 @@
-const fragmentRegExp = new RegExp(`[\\#&]${key}=([^&#]*)`);
-
 function getFragment(key, defaultValue = '') {
+    const fragmentRegExp = new RegExp(`[\\#&]${key}=([^&#]*)`);
     const result = fragmentRegExp.exec(location.hash);
 
     if (result && result.length >= 2) {
diff --git a/generator/templates/Default/src/components/BaseForm.vue b/generator/templates/Default/src/components/BaseForm.vue
index 5c7580e..50ca43b 100644
--- a/generator/templates/Default/src/components/BaseForm.vue
+++ b/generator/templates/Default/src/components/BaseForm.vue
@@ -1,5 +1,5 @@
 <script>
-import store from '../store';
+import {mapGetters, mapMutations} from 'vuex';
 
 export default {
     name: 'Form',
@@ -9,6 +9,11 @@ export default {
             type: Object,
         },
     },
+    computed: {
+        ...mapGetters({
+            findError: 'error/find',
+        }),
+    },
     watch: {
         errors: {
             handler() {
@@ -23,14 +28,18 @@ export default {
         };
     },
     methods: {
+        ...mapMutations({
+            removeError: 'error/remove',
+        }),
         validate() {
             this.$refs.form.validate();
         },
         clear() {
             this.$refs.form.reset();
         },
+        /* Should only be used for Vuetify rules */
         serverError(key) {
-            const error = store.getters['error/find'](key);
+            const error = this.findError(key);
 
             if (error) {
                 this.removeServerError(key);
@@ -41,7 +50,7 @@ export default {
             return true;
         },
         removeServerError(key) {
-            store.commit('error/remove', key);
+            this.removeError(key);
         },
     },
 };
diff --git a/generator/templates/Default/src/models/model.js b/generator/templates/Default/src/models/model.js
new file mode 100644
index 0000000..afc3e89
--- /dev/null
+++ b/generator/templates/Default/src/models/model.js
@@ -0,0 +1,13 @@
+/**
+ *
+ */
+class Model {
+    /**
+     * @return {{}};
+     */
+    mapForRequest() {
+        throw new Error(`${this.constructor.name}::mapForRequest unset`);
+    }
+}
+
+export default Model;
diff --git a/generator/templates/Default/src/models/user.js b/generator/templates/Default/src/models/user.js
new file mode 100644
index 0000000..842cbcb
--- /dev/null
+++ b/generator/templates/Default/src/models/user.js
@@ -0,0 +1,15 @@
+import Model from './model.js';
+
+class User extends Model {
+    name = '';
+    email = '';
+
+    mapForRequest() {
+        return {
+            name: this.name,
+            email: this.email,
+        };
+    }
+}
+
+export default User;
diff --git a/generator/templates/Default/src/plugins/vuetify.js b/generator/templates/Default/src/plugins/vuetify.js
index aee89dd..37f0b77 100644
--- a/generator/templates/Default/src/plugins/vuetify.js
+++ b/generator/templates/Default/src/plugins/vuetify.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
 import nl from 'vuetify/es5/locale/nl';
-import '@kingscode/vuetify-resource/dist/vuetify-resource.css';
 
 <%_ if (options.plugins.includes('fontawesomepro')){ _%>
 import '@fortawesome/fontawesome-pro/css/all.css';
diff --git a/generator/templates/Default/src/router/index.js b/generator/templates/Default/src/router/index.js
index 18fdb5e..5ec4d1d 100644
--- a/generator/templates/Default/src/router/index.js
+++ b/generator/templates/Default/src/router/index.js
@@ -47,7 +47,7 @@ export default new Router({
                 {
                     path: '/registration/verify',
                     name: 'registration.verify',
-                    component: () => import('@/views/Authorisation/Verify.vue'),
+                    component: () => import('@/views/Verify.vue'),
                 },
             ]
         },
diff --git a/generator/templates/Default/src/templates/Default.vue b/generator/templates/Default/src/templates/Default.vue
index 7689fd7..0889815 100644
--- a/generator/templates/Default/src/templates/Default.vue
+++ b/generator/templates/Default/src/templates/Default.vue
@@ -44,7 +44,7 @@ export default {
     },
     computed: {
         ...mapGetters({
-            isLoggedIn: 'Authorisation/isLoggedIn',
+            isLoggedIn: 'authorisation/isLoggedIn',
         }),
     },
     created() {
diff --git a/package.json b/package.json
index a5a3f61..72d96b1 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "file-system": "^2.2.2"
+    "file-system": "^2.2.2",
+    "qs": "^6.9.4"
   }
 }

From f6128137f11a8d32451d6cb03273a3f639abdbf2 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Thu, 16 Jul 2020 14:45:58 +0200
Subject: [PATCH 06/33] Throw on token fetch failure

---
 .../Authorisation/src/views/AuthorisationCallback.vue        | 2 +-
 .../templates/Authorisation/src/views/InvitationAccept.vue   | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/generator/templates/Authorisation/src/views/AuthorisationCallback.vue b/generator/templates/Authorisation/src/views/AuthorisationCallback.vue
index 9ffb628..2e3d7a0 100644
--- a/generator/templates/Authorisation/src/views/AuthorisationCallback.vue
+++ b/generator/templates/Authorisation/src/views/AuthorisationCallback.vue
@@ -20,7 +20,7 @@ export default {
 
         const token = getFragment('token');
 
-        if (!token) return; // what to do?
+        if (!token) throw new Error('AuthorisationCallback::created token hash not found');
 
         this.setAuthorisationToken(token);
 
diff --git a/generator/templates/Authorisation/src/views/InvitationAccept.vue b/generator/templates/Authorisation/src/views/InvitationAccept.vue
index 7788ba9..0645e5a 100644
--- a/generator/templates/Authorisation/src/views/InvitationAccept.vue
+++ b/generator/templates/Authorisation/src/views/InvitationAccept.vue
@@ -113,11 +113,6 @@ export default {
                 }
             }).finally(() => this.isLoading = false);
         },
-        handleLogin() {
-            this.$router.push({
-                name: 'login',
-            });
-        },
         serverError(name) {
             return this.findError(name) || true;
         },

From 6442c9e63c0ee4a6831adab6c268dc58539fe9c1 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Thu, 16 Jul 2020 14:48:37 +0200
Subject: [PATCH 07/33] Remove unused qs package in package.json

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 72d96b1..2edaf35 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,5 @@
   "license": "MIT",
   "dependencies": {
     "file-system": "^2.2.2",
-    "qs": "^6.9.4"
   }
 }

From 4891d73fc2da5eace94c49592796f6a7d1937e41 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Thu, 16 Jul 2020 14:52:58 +0200
Subject: [PATCH 08/33] Fix typo in interceptor.js

---
 .../templates/Default/src/api/implementation/app/interceptor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/generator/templates/Default/src/api/implementation/app/interceptor.js b/generator/templates/Default/src/api/implementation/app/interceptor.js
index 40621e5..a5726bf 100644
--- a/generator/templates/Default/src/api/implementation/app/interceptor.js
+++ b/generator/templates/Default/src/api/implementation/app/interceptor.js
@@ -57,7 +57,7 @@ function onResponseRejected(error) {
     if (errors && status === 422) {
         Object.keys(errors).forEach(key => store.commit('error/add', {
             key: key,
-            message: error[key][0],
+            message: errors[key][0],
         }));
     }
 

From 3b145272b2e0d3839c9917711b86ec7630c19737 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Thu, 16 Jul 2020 15:03:27 +0200
Subject: [PATCH 09/33] Remove accidentally pasted text in Menu.vue

---
 generator/templates/Default/src/components/menu/Menu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/generator/templates/Default/src/components/menu/Menu.vue b/generator/templates/Default/src/components/menu/Menu.vue
index 2d7ae4d..4c8b22b 100644
--- a/generator/templates/Default/src/components/menu/Menu.vue
+++ b/generator/templates/Default/src/components/menu/Menu.vue
@@ -17,7 +17,7 @@
                     :key="subItem.title"
                     :to="subItem.route"
                     :value="$route.name === subItem.route">
-                    s very large so the tab took a large<v-list-item-action>
+                    <v-list-item-action>
                         <v-icon>{{ subItem.icon }}</v-icon>
                     </v-list-item-action>
                     <v-list-item-content>

From b3da2f3fc66265d9c0212a015edae188560f89a8 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Thu, 16 Jul 2020 15:05:34 +0200
Subject: [PATCH 10/33] Move model.js and its logic to application folder

---
 .../Crud/src/components/forms/UserForm.vue    |  2 +-
 .../src/{ => application}/models/model.js     |  0
 .../src/{ => application}/models/user.js      |  0
 package.json                                  | 24 +++++++++----------
 4 files changed, 13 insertions(+), 13 deletions(-)
 rename generator/templates/Default/src/{ => application}/models/model.js (100%)
 rename generator/templates/Default/src/{ => application}/models/user.js (100%)

diff --git a/generator/templates/Crud/src/components/forms/UserForm.vue b/generator/templates/Crud/src/components/forms/UserForm.vue
index 61d8475..c0dcbef 100644
--- a/generator/templates/Crud/src/components/forms/UserForm.vue
+++ b/generator/templates/Crud/src/components/forms/UserForm.vue
@@ -25,7 +25,7 @@
 
 <script lang="js">
 import Form from '@/components/VuetifyResourceBaseForm.vue';
-import User from '../../models/user.js';
+import User from '../../application/models/user.js';
 
 export default {
     name: 'UserForm',
diff --git a/generator/templates/Default/src/models/model.js b/generator/templates/Default/src/application/models/model.js
similarity index 100%
rename from generator/templates/Default/src/models/model.js
rename to generator/templates/Default/src/application/models/model.js
diff --git a/generator/templates/Default/src/models/user.js b/generator/templates/Default/src/application/models/user.js
similarity index 100%
rename from generator/templates/Default/src/models/user.js
rename to generator/templates/Default/src/application/models/user.js
diff --git a/package.json b/package.json
index 2edaf35..5f96731 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,14 @@
 {
-  "name": "vue-cli-plugin-kingscode-scaffold",
-  "version": "0.8.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "MIT",
-  "dependencies": {
-    "file-system": "^2.2.2",
-  }
+    "name": "vue-cli-plugin-kingscode-scaffold",
+    "version": "0.8.0",
+    "description": "",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "",
+    "license": "MIT",
+    "dependencies": {
+        "file-system": "^2.2.2"
+    }
 }

From 0c76d6729914857242b531be9c2010faa812b746 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Thu, 16 Jul 2020 15:27:56 +0200
Subject: [PATCH 11/33] Export application axios instance helpers instead of
 global axios

---
 .../templates/Default/src/api/implementation/app/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/generator/templates/Default/src/api/implementation/app/index.js b/generator/templates/Default/src/api/implementation/app/index.js
index 2b1a305..c3b55b8 100644
--- a/generator/templates/Default/src/api/implementation/app/index.js
+++ b/generator/templates/Default/src/api/implementation/app/index.js
@@ -27,10 +27,10 @@ const instance = axios.create(config);
 instance.interceptors.request.use(onRequestFulFilled, onRequestRejected);
 instance.interceptors.response.use(onResponseFulFilled, onResponseRejected);
 
-const get = axios.get;
-const post = axios.post;
-const destroy = axios.delete;
-const put = axios.put;
+const get = instance.get;
+const post = instance.post;
+const destroy = instance.delete;
+const put = instance.put;
 
 export {
     getPaginated,

From 63bd63956ada7f50124902a3cd7f169d28802052 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Thu, 16 Jul 2020 16:27:18 +0200
Subject: [PATCH 12/33] Correct header in rate limit calculator in response.js

---
 .../src/components/Authorisation/LoginCard.vue     | 14 +++++++++++++-
 .../templates/Default/src/api/util/response.js     |  5 +++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/generator/templates/Authorisation/src/components/Authorisation/LoginCard.vue b/generator/templates/Authorisation/src/components/Authorisation/LoginCard.vue
index 89a4ba8..9f3d869 100644
--- a/generator/templates/Authorisation/src/components/Authorisation/LoginCard.vue
+++ b/generator/templates/Authorisation/src/components/Authorisation/LoginCard.vue
@@ -43,6 +43,7 @@
 <script>
 import LoginRequest from '../../api/endpoints/authorisation/login';
 import {mapGetters} from 'vuex';
+import {getRateLimitMinutes} from '../../api/util/response.js';
 
 export default {
     name: 'LoginCard',
@@ -72,7 +73,18 @@ export default {
                     this.isRedirecting = true;
                     this.redirectToAuthDispense(res.data.data.token);
                 })
-                .catch(() => this.errorMessage = this.findError('email'))
+                .catch(err => {
+                    const response = err.response;
+                    const status = response.status;
+
+                    if (status === 429) {
+                        this.errorMessage =
+                            `Je hebt te veel foutieve inlog pogingen gedaan.
+                             Probeer het over ${getRateLimitMinutes(response, 15)} minuten opnieuw`;
+                    } else {
+                        this.errorMessage = this.findError('email');
+                    }
+                })
                 .finally(() => this.isLoading = false);
         },
         redirectToAuthDispense(token) {
diff --git a/generator/templates/Default/src/api/util/response.js b/generator/templates/Default/src/api/util/response.js
index 41e9240..aaa4d3b 100644
--- a/generator/templates/Default/src/api/util/response.js
+++ b/generator/templates/Default/src/api/util/response.js
@@ -1,9 +1,10 @@
 import dayjs from '../../plugins/dayJs.js';
 
 function getRateLimitMinutes(response, defaultMinutes = 15) {
-    const timestamp = response.headers['x-ratelimit-reset'] * 1000;
+    const remainingMilliseconds = (+response.headers['retry-after']) * 1000;
+    const unlockTime = Date.now() + remainingMilliseconds;
 
-    return dayjs(timestamp).diff(dayjs(), 'minute') || defaultMinutes;
+    return dayjs(unlockTime).diff(dayjs(), 'minute') || defaultMinutes;
 }
 
 export {

From 2cdaae7dbe966720208b8b808a4d64f3c94de09a Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Thu, 16 Jul 2020 16:36:14 +0200
Subject: [PATCH 13/33] Update AuthorisationGuard.js logic

---
 .../src/guards/AuthorisationGuard.js          |   2 +-
 .../Crud/src/components/Resource.vue          | 116 ++++++++----------
 .../templates/Crud/src/views/UserResource.vue |  40 +++---
 3 files changed, 69 insertions(+), 89 deletions(-)

diff --git a/generator/templates/Authorisation/src/guards/AuthorisationGuard.js b/generator/templates/Authorisation/src/guards/AuthorisationGuard.js
index 35fce64..0a554c2 100644
--- a/generator/templates/Authorisation/src/guards/AuthorisationGuard.js
+++ b/generator/templates/Authorisation/src/guards/AuthorisationGuard.js
@@ -1,7 +1,7 @@
 import store from '../store';
 
 export default function (to, from, next) {
-    if (store.getters['authorisation/isLoggedIn']) {
+    if (!store.getters['authorisation/isLoggedIn']) {
         next({
             name: 'login',
         });
diff --git a/generator/templates/Crud/src/components/Resource.vue b/generator/templates/Crud/src/components/Resource.vue
index f290d96..2ab51ab 100644
--- a/generator/templates/Crud/src/components/Resource.vue
+++ b/generator/templates/Crud/src/components/Resource.vue
@@ -7,6 +7,7 @@
             :deleteCallback="deleteEvent"
             :getDataCallback="getDataFromApi"
             :getItemCallback="getItemFromApi"
+            @row-click="onRowClick"
             :meta="meta"
             :tableContent="tableContent"
             :texts="require('../VuetifyResourceTexts.js').default"
@@ -17,14 +18,14 @@
         >
             <div slot="createContent">
                 <component :errors="errors"
-                           :is="createFormComponent"
+                           :is="formComponent"
                            :is-update-form="false"
                            ref="createForm"
                            v-model="createForm"/>
             </div>
             <div slot="updateContent">
                 <component :errors="errors"
-                           :is="updateFormComponent"
+                           :is="formComponent"
                            :is-update-form="true"
                            ref="updateForm"
                            v-model="updateForm"/>
@@ -36,13 +37,13 @@
     </v-container>
 </template>
 <script>
-import cloneDeep from 'lodash.clonedeep';
 import FormDataValues from './../mixins/formDataValues';
 import axios from '../api/implementation/app';
+import VuetifyResource from '@kingscode/vuetify-resource';
 
 export default {
-    components: {},
     name: 'Resource',
+    components: {VuetifyResource},
     mixins: [FormDataValues],
     data() {
         return {
@@ -57,10 +58,7 @@ export default {
             type: Array,
             required: true,
         },
-        createFormComponent: {
-            required: false,
-        },
-        updateFormComponent: {
+        formComponent: {
             required: false,
         },
         meta: {
@@ -78,32 +76,17 @@ export default {
             type: String,
             required: false,
         },
-        updateResourceUri: {
-            type: String,
-            required: false,
-        },
-        deleteResourceUri: {
-            type: String,
-            required: false,
-        },
-        createResourceUri: {
-            type: String,
-            required: false,
-        },
-        mapCreateFormValues: {
+        updateHandler: {
             type: Function,
             required: false,
         },
-        mapUpdateFormValues: {
+        deleteHandler: {
             type: Function,
             required: false,
         },
-        mapCreateAndUpdateFormValues: {
+        createHandler: {
             type: Function,
             required: false,
-            default: (values) => {
-                return values;
-            },
         },
         mapDataResponse: {
             type: Function,
@@ -124,8 +107,15 @@ export default {
             type: Function,
             required: false,
         },
+        afterCreate: {
+            type: Function,
+            required: false,
+        },
     },
     methods: {
+        onRowClick(item) {
+            this.$emit('row-click', item);
+        },
         /***
          * @param pagination
          * @param search
@@ -141,14 +131,16 @@ export default {
                     };
                 }
                 axios.get(this.resourceUri, {
-                        q: search,
-                        page: page,
-                        perPage: itemsPerPage,
-                        ...sorting,
+                        params: {
+                            search: search || undefined,
+                            page: page,
+                            perPage: itemsPerPage,
+                            ...sorting,
+                        },
                     })
-                    .then(response => {
-                        const items = this.mapDataResponse(response.data.data);
-                        const total = response.data.meta.total;
+                    .then((response) => {
+                        let items = this.mapDataResponse(response.data.data);
+                        let total = response.data.meta.total;
                         resolve({
                             items,
                             total,
@@ -160,8 +152,8 @@ export default {
         getItemFromApi(id) {
             return new Promise((resolve) => {
                 axios.get((this.showResourceUri || this.resourceUri) + '/' + id)
-                    .then(response => {
-                        const item = response.data.data;
+                    .then((response) => {
+                        let item = response.data.data;
                         resolve({
                             item,
                         });
@@ -169,77 +161,73 @@ export default {
 
             });
         },
-        getCreateFormValues() {
-            const formData = new FormData();
-            this.appendFormData(formData, this.mapCreateFormValuesHandler(cloneDeep(this.createForm.values)));
-
-            return formData;
-        },
         createEvent() {
             this.errors = {};
             this.$refs.createForm.validate();
+
             return new Promise((resolve, reject) => {
                 process.nextTick(() => {
                     if (this.createForm.valid) {
-                        axios.post((this.createResourceUri || this.resourceUri), this.getCreateFormValues())
-                            .then(response => {
+                        this.createHandler(this.createForm.values)
+                            .then((response) => {
                                 this.createForm.values = {};
                                 if (typeof this.afterCreate === 'function') {
-                                    this.afterCreate(response.data.data).then(() => {
+                                    this.afterCreate(response.data).then(() => {
                                         resolve();
                                     });
                                 } else {
                                     resolve();
                                 }
-                            }).catch(error => {
+                            }).catch((error) => {
                             this.errors = error.response.data.errors;
                             reject();
                         });
+
                     } else {
                         reject();
                     }
                 });
-            });
-        },
-        getUpdateFormValues() {
-            const formData = new FormData();
-            this.appendFormData(formData, this.mapUpdateFormValuesHandler(cloneDeep(this.updateForm.values)));
 
-            return formData;
+            });
         },
         updateEvent(selected) {
             this.errors = {};
             this.$refs.updateForm.validate();
+
             return new Promise((resolve, reject) => {
                 process.nextTick(() => {
                     if (this.updateForm.valid) {
-                        axios.put((this.updateResourceUri || this.resourceUri) + '/' + selected[0].id, this.getUpdateFormValues())
-                            .then(res => {
+                        this.updateForm.values.id = selected[0].id;
+                        this.updateHandler(this.updateForm.values)
+                            .then((response) => {
                                 if (typeof this.afterUpdate === 'function') {
-                                    this.afterUpdate(res.data.data).then(() => {
+                                    this.afterUpdate(response.data).then(() => {
                                         resolve();
                                     });
                                 } else {
                                     resolve();
                                 }
-                            }).catch(error => {
+                            }).catch((error) => {
                             this.errors = error.response.data.errors;
                             reject();
                         });
-
                     } else {
                         reject();
                     }
                 });
-
             });
 
         },
         deleteEvent(ids) {
-            return new Promise((resolve) => {
-                const promises = [];
-                ids.forEach(id => promises.push(axios.delete(`${this.deleteResourceUri || this.resourceUri}/${id}`)));
-                Promise.all(promises).then(() => resolve());
+            return new Promise((resolve, reject) => {
+                let promises = [];
+                ids.forEach((id) => {
+                    promises.push(this.deleteHandler(id));
+                });
+                Promise.all(promises).then(() => {
+                    resolve();
+                }).catch(() => reject());
+
             });
         },
         /**
@@ -258,12 +246,6 @@ export default {
             }
             this.updateForm.values = selected[0];
         },
-        mapCreateFormValuesHandler(values) {
-            return this.mapCreateFormValues ? this.mapCreateFormValues() : this.mapCreateAndUpdateFormValues(values);
-        },
-        mapUpdateFormValuesHandler(values) {
-            return this.mapUpdateFormValues ? this.mapUpdateFormValues() : this.mapCreateAndUpdateFormValues(values);
-        },
     },
 };
 </script>
diff --git a/generator/templates/Crud/src/views/UserResource.vue b/generator/templates/Crud/src/views/UserResource.vue
index d69c4d5..7527df0 100644
--- a/generator/templates/Crud/src/views/UserResource.vue
+++ b/generator/templates/Crud/src/views/UserResource.vue
@@ -1,12 +1,10 @@
 <template>
     <v-container fluid>
         <Resource
-            :create-form-component="() => import('../components/forms/UserForm.vue')"
+            :form-component="() => import('../components/forms/UserForm.vue')"
             :meta="{name: 'gebruiker', namePlural: 'gebruikers'}"
             :table-content="tableContent"
-            :update-form-component="() => import('../components/forms/UserForm.vue')"
             resource-uri="user"
-            can-search
         />
     </v-container>
 </template>
@@ -15,25 +13,25 @@
 import Resource from '@/components/Resource.vue';
 
 export default {
-    components: {Resource},
     name: 'UserResource',
-    data() {
-        return {
-            tableContent: [
-                {
-                    text: 'Naam',
-                    align: 'left',
-                    sortable: true,
-                    value: 'name',
-                },
-                {
-                    text: 'E-mail',
-                    align: 'left',
-                    sortable: true,
-                    value: 'email',
-                },
-            ],
-        };
+    components: {
+        Resource,
+    },
+    computed: {
+        tableContent: () => [
+            {
+                text: 'Naam',
+                align: 'left',
+                sortable: true,
+                value: 'name',
+            },
+            {
+                text: 'E-mail',
+                align: 'left',
+                sortable: true,
+                value: 'email',
+            },
+        ],
     },
 };
 </script>

From 918c44f4b61de7f076182e17aff84a0eac2ec791 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Thu, 16 Jul 2020 16:42:07 +0200
Subject: [PATCH 14/33] Fix Menu.vue exception on undefined item array

---
 generator/templates/Default/src/components/menu/Menu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/generator/templates/Default/src/components/menu/Menu.vue b/generator/templates/Default/src/components/menu/Menu.vue
index 4c8b22b..d9c757b 100644
--- a/generator/templates/Default/src/components/menu/Menu.vue
+++ b/generator/templates/Default/src/components/menu/Menu.vue
@@ -5,7 +5,7 @@
                 :disabled="item.disabled"
                 :prepend-icon="item.icon"
                 no-action
-                v-if="!!item.items.length"
+                v-if="!!item.items && item.items.length"
                 v-model="item.active">
                 <template slot="activator">
                     <v-list-item-content>

From 8c8f0514ed26ec34aeb14b94f585eb3634b4718a Mon Sep 17 00:00:00 2001
From: Deluze <bartramaekers99@gmail.com>
Date: Fri, 17 Jul 2020 09:56:20 +0200
Subject: [PATCH 15/33] Throw exception in keyConverter.js if data not iterable

---
 .../Default/src/api/util/keyConverter.js      | 20 +++++++++++--------
 .../src/api/util/objectToFormDataConverter.js |  6 ++++--
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/generator/templates/Default/src/api/util/keyConverter.js b/generator/templates/Default/src/api/util/keyConverter.js
index 3cb6486..6d22b40 100644
--- a/generator/templates/Default/src/api/util/keyConverter.js
+++ b/generator/templates/Default/src/api/util/keyConverter.js
@@ -1,11 +1,13 @@
 function camelToSnake(data) {
-    const target = Array.isArray(data) ? [] : {};
+    if (!isIterableObject(data)) {
+        throw new Error('keyConverter::camelToSnake data is not iterable');
+    }
 
-    if (typeof data !== 'object') return;
+    const target = Array.isArray(data) ? [] : {};
 
     Object.keys(data).forEach(key => {
         Object.assign(target, {
-            [convertCamelToSnake(key)]: isObject(data[key]) ? camelToSnake(data[key]) : data[key],
+            [convertCamelToSnake(key)]: isIterableObject(data[key]) ? camelToSnake(data[key]) : data[key],
         });
     });
 
@@ -19,13 +21,15 @@ function convertCamelToSnake(key) {
 }
 
 function snakeToCamel(data) {
-    const target = Array.isArray(data) ? [] : {};
+    if (!isIterableObject(data)) {
+        throw new Error('keyConverter::snakeToCamel data is not iterable');
+    }
 
-    if (typeof data !== 'object') return;
+    const target = Array.isArray(data) ? [] : {};
 
     Object.keys(data).forEach(key => {
         Object.assign(target, {
-            [convertSnakeToCamel(key)]: isObject(data[key]) ? snakeToCamel(data[key]) : data[key],
+            [convertSnakeToCamel(key)]: isIterableObject(data[key]) ? snakeToCamel(data[key]) : data[key],
         });
     });
 
@@ -38,8 +42,8 @@ function convertSnakeToCamel(key) {
     });
 }
 
-function isObject(target) {
-    return typeof target === 'object' && target !== null;
+function isIterableObject(target) {
+    return typeof target === 'object' && target !== null && !(target instanceof Blob) && !(target instanceof Date);
 }
 
 export {
diff --git a/generator/templates/Default/src/api/util/objectToFormDataConverter.js b/generator/templates/Default/src/api/util/objectToFormDataConverter.js
index ee6efcb..b924668 100644
--- a/generator/templates/Default/src/api/util/objectToFormDataConverter.js
+++ b/generator/templates/Default/src/api/util/objectToFormDataConverter.js
@@ -3,9 +3,11 @@ function isIterableObject(input) {
 }
 
 function objectToFormData(obj) {
-    const data = new FormData();
+    if (!isIterableObject(obj)) {
+        throw new Error('objectToFormDataConverter::objectToFormData data is not iterable');
+    }
 
-    if (!isIterableObject(obj)) return data;
+    const data = new FormData();
 
     return convert(obj, data);
 }

From 3092b74bc3c28411a74645bc369eb5cd4ceb205e Mon Sep 17 00:00:00 2001
From: Deluze <bartramaekers99@gmail.com>
Date: Fri, 17 Jul 2020 10:39:13 +0200
Subject: [PATCH 16/33] Add the free variant of FontAwesome if not chosen for
 pro

---
 generator/index.js                                   |  6 ++++++
 generator/templates/Crud/src/components/Resource.vue | 12 +++++-------
 .../templates/Default/src/components/menu/Menu.vue   |  1 -
 generator/templates/Default/src/plugins/vuetify.js   |  4 +++-
 generator/templates/Default/vue.config.js            |  7 ++-----
 5 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/generator/index.js b/generator/index.js
index 619ae8d..86947c4 100644
--- a/generator/index.js
+++ b/generator/index.js
@@ -20,6 +20,12 @@ module.exports = (api, options) => {
                 '@fortawesome/fontawesome-pro': '^5.8.1',
             },
         });
+    } else {
+        api.extendPackage({
+            dependencies: {
+                '@fortawesome/fontawesome-free': '^5.14.0',
+            },
+        });
     }
 
     if (options.useCrud) {
diff --git a/generator/templates/Crud/src/components/Resource.vue b/generator/templates/Crud/src/components/Resource.vue
index 2ab51ab..c81b5f5 100644
--- a/generator/templates/Crud/src/components/Resource.vue
+++ b/generator/templates/Crud/src/components/Resource.vue
@@ -123,12 +123,10 @@ export default {
         getDataFromApi(pagination, search) {
             const {sortBy, sortDesc, page, itemsPerPage} = pagination;
             return new Promise((resolve, reject) => {
-                let sorting = {};
+                const sorting = {};
                 if (sortBy[0]) {
-                    sorting = {
-                        sortBy: sortBy[0],
-                        desc: sortDesc[0] ? 1 : 0,
-                    };
+                    sorting.sortBy = sortBy[0];
+                    sorting.desc = sortDesc[0] ? 1 : 0;
                 }
                 axios.get(this.resourceUri, {
                         params: {
@@ -139,8 +137,8 @@ export default {
                         },
                     })
                     .then((response) => {
-                        let items = this.mapDataResponse(response.data.data);
-                        let total = response.data.meta.total;
+                        const items = this.mapDataResponse(response.data.data);
+                        const total = response.data.meta.total;
                         resolve({
                             items,
                             total,
diff --git a/generator/templates/Default/src/components/menu/Menu.vue b/generator/templates/Default/src/components/menu/Menu.vue
index d9c757b..6f8bbf4 100644
--- a/generator/templates/Default/src/components/menu/Menu.vue
+++ b/generator/templates/Default/src/components/menu/Menu.vue
@@ -4,7 +4,6 @@
             <v-list-item-group
                 :disabled="item.disabled"
                 :prepend-icon="item.icon"
-                no-action
                 v-if="!!item.items && item.items.length"
                 v-model="item.active">
                 <template slot="activator">
diff --git a/generator/templates/Default/src/plugins/vuetify.js b/generator/templates/Default/src/plugins/vuetify.js
index 37f0b77..d451cb1 100644
--- a/generator/templates/Default/src/plugins/vuetify.js
+++ b/generator/templates/Default/src/plugins/vuetify.js
@@ -3,7 +3,9 @@ import Vuetify from 'vuetify/lib';
 import nl from 'vuetify/es5/locale/nl';
 
 <%_ if (options.plugins.includes('fontawesomepro')){ _%>
-import '@fortawesome/fontawesome-pro/css/all.css';
+import '@fortawesome/fontawesome-pro/css/all.min.css';
+<%_ } else { _%>
+import '@fortawesome/fontawesome-free/css/all.min.css';
 <%_ } _%>
 
 Vue.use(Vuetify);
diff --git a/generator/templates/Default/vue.config.js b/generator/templates/Default/vue.config.js
index 1722bae..3f75bd6 100644
--- a/generator/templates/Default/vue.config.js
+++ b/generator/templates/Default/vue.config.js
@@ -1,7 +1,4 @@
 module.exports = {
-    'transpileDependencies': [
-        'vuetify',
-    ],
     publicPath: process.env.VUE_APP_PUBLIC_PATH,
     pwa: {
         workboxPluginMode: 'GenerateSW',
@@ -9,8 +6,8 @@ module.exports = {
             skipWaiting: true,
             clientsClaim: true,
             exclude: [
-                /\.htaccess$/
-            ]
+                /\.htaccess$/,
+            ],
         },
     },
 };

From 0dc0b9e1b06bd6099a0a3113d65af3b3ed7df14a Mon Sep 17 00:00:00 2001
From: Deluze <bartramaekers99@gmail.com>
Date: Fri, 17 Jul 2020 13:13:15 +0200
Subject: [PATCH 17/33] Fix authorisation.js's state + Allow requests without
 any data

---
 .../Default/src/api/implementation/app/transformer.js    | 5 +++--
 .../templates/Default/src/components/AppBarMenu.vue      | 2 +-
 generator/templates/Default/src/store/index.js           | 9 +++++++++
 .../templates/Default/src/store/modules/authorisation.js | 9 ++-------
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/generator/templates/Default/src/api/implementation/app/transformer.js b/generator/templates/Default/src/api/implementation/app/transformer.js
index 2711048..369478d 100644
--- a/generator/templates/Default/src/api/implementation/app/transformer.js
+++ b/generator/templates/Default/src/api/implementation/app/transformer.js
@@ -20,15 +20,16 @@ function transformResponse(response) {
 }
 
 /**
- * @param data
+ * @param data {undefined|*}
  * @return {FormData}
  */
 function transformRequest(data) {
     if (data) {
         data = camelToSnake(data);
+        data = objectToFormData(data);
     }
 
-    return objectToFormData(data);
+    return data;
 }
 
 function transformParams(params) {
diff --git a/generator/templates/Default/src/components/AppBarMenu.vue b/generator/templates/Default/src/components/AppBarMenu.vue
index 5b2dd44..307deb1 100644
--- a/generator/templates/Default/src/components/AppBarMenu.vue
+++ b/generator/templates/Default/src/components/AppBarMenu.vue
@@ -27,7 +27,7 @@ export default {
     name: 'AppBarMenu',
     methods: {
         ...mapActions({
-            logout: 'Authorisation/logout',
+            logout: 'authorisation/logout',
         }),
     },
 };
diff --git a/generator/templates/Default/src/store/index.js b/generator/templates/Default/src/store/index.js
index 7a70d77..6f5da3f 100644
--- a/generator/templates/Default/src/store/index.js
+++ b/generator/templates/Default/src/store/index.js
@@ -5,9 +5,18 @@ import Authorisation from './modules/authorisation';
 import Error from './modules/error';
 /* END MODULES */
 
+import createPersistedState from 'vuex-persistedstate';
+
 Vue.use(Vuex);
 
 export default new Vuex.Store({
+    plugins: [
+        createPersistedState({
+            paths: [
+                'authorisation',
+            ],
+        }),
+    ],
     modules: {
         authorisation: Authorisation,
         error: Error,
diff --git a/generator/templates/Default/src/store/modules/authorisation.js b/generator/templates/Default/src/store/modules/authorisation.js
index cd687eb..7d6f767 100644
--- a/generator/templates/Default/src/store/modules/authorisation.js
+++ b/generator/templates/Default/src/store/modules/authorisation.js
@@ -1,18 +1,13 @@
 import router from '../../router';
 
-import createPersistedState from 'vuex-persistedstate';
-
 export default {
     namespaced: true,
-    plugins: [
-        createPersistedState(),
-    ],
     state: {
         token: '',
     },
     mutations: {
-        setAuthorisationToken(currentState, token) {
-            currentState.token = token;
+        setAuthorisationToken(state, token) {
+            state.token = token;
         },
     },
     actions: {

From 1cebe981fb3fde48a1b48ec71d10fbf988cc5f0e Mon Sep 17 00:00:00 2001
From: Deluze <bartramaekers99@gmail.com>
Date: Fri, 17 Jul 2020 14:07:47 +0200
Subject: [PATCH 18/33] Fix redirect to login on missing token

---
 .../templates/Default/src/store/modules/authorisation.js      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/generator/templates/Default/src/store/modules/authorisation.js b/generator/templates/Default/src/store/modules/authorisation.js
index 7d6f767..44d2ab5 100644
--- a/generator/templates/Default/src/store/modules/authorisation.js
+++ b/generator/templates/Default/src/store/modules/authorisation.js
@@ -11,8 +11,8 @@ export default {
         },
     },
     actions: {
-        logout(state) {
-            state.token = '';
+        logout(context) {
+            context.commit('setAuthorisationToken', '');
 
             router.push({
                 name: 'login',

From 02ee5882366a59d83001046bb20acdf89bb493a6 Mon Sep 17 00:00:00 2001
From: Deluze <bartramaekers99@gmail.com>
Date: Fri, 17 Jul 2020 15:14:47 +0200
Subject: [PATCH 19/33] Add instanceof model.js check in transformer.js

---
 .../Authorisation/src/api/endpoints/user.js   | 28 +++++++++++++++++++
 .../Crud/src/components/Resource.vue          |  3 +-
 .../src/api/implementation/app/transformer.js |  5 ++++
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 generator/templates/Authorisation/src/api/endpoints/user.js

diff --git a/generator/templates/Authorisation/src/api/endpoints/user.js b/generator/templates/Authorisation/src/api/endpoints/user.js
new file mode 100644
index 0000000..75a461d
--- /dev/null
+++ b/generator/templates/Authorisation/src/api/endpoints/user.js
@@ -0,0 +1,28 @@
+import axios from '../implementation/app';
+
+/**
+ * @param user {User}
+ */
+function create(user) {
+    return axios.post('user', user);
+}
+
+/**
+ * @param user {User}
+ */
+function update(user) {
+    return axios.put(`user/${user.id}`, user);
+}
+
+/**
+ * @param userId {number}
+ */
+function destroy(userId) {
+    return axios.destroy(`user/${userId}`);
+}
+
+export {
+    create,
+    update,
+    destroy,
+};
\ No newline at end of file
diff --git a/generator/templates/Crud/src/components/Resource.vue b/generator/templates/Crud/src/components/Resource.vue
index c81b5f5..76ca87e 100644
--- a/generator/templates/Crud/src/components/Resource.vue
+++ b/generator/templates/Crud/src/components/Resource.vue
@@ -218,10 +218,11 @@ export default {
         },
         deleteEvent(ids) {
             return new Promise((resolve, reject) => {
-                let promises = [];
+                const promises = [];
                 ids.forEach((id) => {
                     promises.push(this.deleteHandler(id));
                 });
+
                 Promise.all(promises).then(() => {
                     resolve();
                 }).catch(() => reject());
diff --git a/generator/templates/Default/src/api/implementation/app/transformer.js b/generator/templates/Default/src/api/implementation/app/transformer.js
index 369478d..f645d55 100644
--- a/generator/templates/Default/src/api/implementation/app/transformer.js
+++ b/generator/templates/Default/src/api/implementation/app/transformer.js
@@ -1,6 +1,7 @@
 import {camelToSnake, snakeToCamel} from '../../util/keyConverter';
 import objectToFormData from '../../util/objectToFormDataConverter.js';
 import Qs from 'qs';
+import Model from '../../../application/models/model.js';
 
 /**
  * @param response
@@ -24,6 +25,10 @@ function transformResponse(response) {
  * @return {FormData}
  */
 function transformRequest(data) {
+    if (data instanceof Model) {
+        data = data.mapForRequest();
+    }
+
     if (data) {
         data = camelToSnake(data);
         data = objectToFormData(data);

From 92ef7e12990dc486f5644c6c5eb82db1c961e8b2 Mon Sep 17 00:00:00 2001
From: Deluze <bartramaekers99@gmail.com>
Date: Fri, 17 Jul 2020 15:35:11 +0200
Subject: [PATCH 20/33] Replace destroy with delete

---
 generator/templates/Authorisation/src/api/endpoints/user.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/generator/templates/Authorisation/src/api/endpoints/user.js b/generator/templates/Authorisation/src/api/endpoints/user.js
index 75a461d..8b3ff1f 100644
--- a/generator/templates/Authorisation/src/api/endpoints/user.js
+++ b/generator/templates/Authorisation/src/api/endpoints/user.js
@@ -18,7 +18,7 @@ function update(user) {
  * @param userId {number}
  */
 function destroy(userId) {
-    return axios.destroy(`user/${userId}`);
+    return axios.delete(`user/${userId}`);
 }
 
 export {

From 6c4c30b144ea47edb60752a105702b40561febeb Mon Sep 17 00:00:00 2001
From: Deluze <bartramaekers99@gmail.com>
Date: Fri, 17 Jul 2020 15:40:51 +0200
Subject: [PATCH 21/33] Fix whitespace in user.js

---
 generator/templates/Authorisation/src/api/endpoints/user.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/generator/templates/Authorisation/src/api/endpoints/user.js b/generator/templates/Authorisation/src/api/endpoints/user.js
index 8b3ff1f..00ba992 100644
--- a/generator/templates/Authorisation/src/api/endpoints/user.js
+++ b/generator/templates/Authorisation/src/api/endpoints/user.js
@@ -25,4 +25,4 @@ export {
     create,
     update,
     destroy,
-};
\ No newline at end of file
+};

From b56cd9e8450f70a3fc9a7802b9736f423ed8230f Mon Sep 17 00:00:00 2001
From: Deluze <bartramaekers99@gmail.com>
Date: Fri, 17 Jul 2020 15:57:01 +0200
Subject: [PATCH 22/33] Add some shortcuts

---
 .../Crud/src/components/Resource.vue          | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/generator/templates/Crud/src/components/Resource.vue b/generator/templates/Crud/src/components/Resource.vue
index 76ca87e..7b1a1c4 100644
--- a/generator/templates/Crud/src/components/Resource.vue
+++ b/generator/templates/Crud/src/components/Resource.vue
@@ -137,11 +137,10 @@ export default {
                         },
                     })
                     .then((response) => {
-                        const items = this.mapDataResponse(response.data.data);
-                        const total = response.data.meta.total;
+                        const axiosData = response.data;
                         resolve({
-                            items,
-                            total,
+                            items: this.mapDataResponse(axiosData.data),
+                            total: axiosData.meta,
                         });
                     }).catch(() => reject());
 
@@ -151,9 +150,8 @@ export default {
             return new Promise((resolve) => {
                 axios.get((this.showResourceUri || this.resourceUri) + '/' + id)
                     .then((response) => {
-                        let item = response.data.data;
                         resolve({
-                            item,
+                            item: response.data.data,
                         });
                     });
 
@@ -219,14 +217,11 @@ export default {
         deleteEvent(ids) {
             return new Promise((resolve, reject) => {
                 const promises = [];
-                ids.forEach((id) => {
-                    promises.push(this.deleteHandler(id));
-                });
-
-                Promise.all(promises).then(() => {
-                    resolve();
-                }).catch(() => reject());
+                ids.forEach(id => promises.push(this.deleteHandler(id)));
 
+                Promise.all(promises)
+                    .then(() => resolve())
+                    .catch(() => reject());
             });
         },
         /**

From 5ae4a578cbbf6e4e26e754f93ffcc034f04cec62 Mon Sep 17 00:00:00 2001
From: Deluze <bartramaekers99@gmail.com>
Date: Fri, 17 Jul 2020 15:57:01 +0200
Subject: [PATCH 23/33] Revert "Add some shortcuts"

This reverts commit b56cd9e8450f70a3fc9a7802b9736f423ed8230f.
---
 .../Crud/src/components/Resource.vue          | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/generator/templates/Crud/src/components/Resource.vue b/generator/templates/Crud/src/components/Resource.vue
index 7b1a1c4..76ca87e 100644
--- a/generator/templates/Crud/src/components/Resource.vue
+++ b/generator/templates/Crud/src/components/Resource.vue
@@ -137,10 +137,11 @@ export default {
                         },
                     })
                     .then((response) => {
-                        const axiosData = response.data;
+                        const items = this.mapDataResponse(response.data.data);
+                        const total = response.data.meta.total;
                         resolve({
-                            items: this.mapDataResponse(axiosData.data),
-                            total: axiosData.meta,
+                            items,
+                            total,
                         });
                     }).catch(() => reject());
 
@@ -150,8 +151,9 @@ export default {
             return new Promise((resolve) => {
                 axios.get((this.showResourceUri || this.resourceUri) + '/' + id)
                     .then((response) => {
+                        let item = response.data.data;
                         resolve({
-                            item: response.data.data,
+                            item,
                         });
                     });
 
@@ -217,11 +219,14 @@ export default {
         deleteEvent(ids) {
             return new Promise((resolve, reject) => {
                 const promises = [];
-                ids.forEach(id => promises.push(this.deleteHandler(id)));
+                ids.forEach((id) => {
+                    promises.push(this.deleteHandler(id));
+                });
+
+                Promise.all(promises).then(() => {
+                    resolve();
+                }).catch(() => reject());
 
-                Promise.all(promises)
-                    .then(() => resolve())
-                    .catch(() => reject());
             });
         },
         /**

From c98305e000d7cf343d560484bee532f65d7e2ebd Mon Sep 17 00:00:00 2001
From: Deluze <bartramaekers99@gmail.com>
Date: Fri, 17 Jul 2020 16:16:14 +0200
Subject: [PATCH 24/33] Take care of non-axios exceptions in interceptor.js

---
 generator/templates/Crud/src/views/UserResource.vue       | 8 ++++++++
 .../Default/src/api/implementation/app/interceptor.js     | 3 +++
 2 files changed, 11 insertions(+)

diff --git a/generator/templates/Crud/src/views/UserResource.vue b/generator/templates/Crud/src/views/UserResource.vue
index 7527df0..7b8beaf 100644
--- a/generator/templates/Crud/src/views/UserResource.vue
+++ b/generator/templates/Crud/src/views/UserResource.vue
@@ -4,6 +4,9 @@
             :form-component="() => import('../components/forms/UserForm.vue')"
             :meta="{name: 'gebruiker', namePlural: 'gebruikers'}"
             :table-content="tableContent"
+            :update-handler="updateHandler"
+            :delete-handler="deleteHandler"
+            :create-handler="createHandler"
             resource-uri="user"
         />
     </v-container>
@@ -12,12 +15,17 @@
 <script lang="js">
 import Resource from '@/components/Resource.vue';
 
+import {create, destroy, update} from '../api/endpoints/user.js';
+
 export default {
     name: 'UserResource',
     components: {
         Resource,
     },
     computed: {
+        updateHandler: () => update,
+        deleteHandler: () => destroy,
+        createHandler: () => create,
         tableContent: () => [
             {
                 text: 'Naam',
diff --git a/generator/templates/Default/src/api/implementation/app/interceptor.js b/generator/templates/Default/src/api/implementation/app/interceptor.js
index a5726bf..ca4732a 100644
--- a/generator/templates/Default/src/api/implementation/app/interceptor.js
+++ b/generator/templates/Default/src/api/implementation/app/interceptor.js
@@ -51,6 +51,9 @@ function onResponseFulFilled(response) {
  */
 function onResponseRejected(error) {
     const response = error.response;
+
+    if (!response) return Promise.reject(error); // network error, not axios related
+
     const status = response.status;
     const errors = response.data.errors;
 

From 0cf7e230fa09a722095fb0074008ce89f66ac279 Mon Sep 17 00:00:00 2001
From: Deluze <bartramaekers99@gmail.com>
Date: Mon, 20 Jul 2020 14:23:15 +0200
Subject: [PATCH 25/33] Remove unused code

---
 .../Authorisation/src/api/endpoints/authorisation/register.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js b/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js
index 7b1d2d4..d09072e 100644
--- a/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js
+++ b/generator/templates/Authorisation/src/api/endpoints/authorisation/register.js
@@ -1,8 +1,8 @@
 import {post} from '../../implementation/app';
 
-function register(email, name, code) {
+function register(email, name) {
     return post('registration', {
-        email, name, code,
+        email, name,
     });
 }
 

From 833645964d49ea03639a47d4d58093062ac7a0e2 Mon Sep 17 00:00:00 2001
From: Bart <32544586+Deluze@users.noreply.github.com>
Date: Mon, 20 Jul 2020 14:38:57 +0200
Subject: [PATCH 26/33] Update prompts.js

Co-authored-by: Ricardo van Laarhoven <ricardo1994@gmail.com>
---
 prompts.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/prompts.js b/prompts.js
index 3b757a0..fef72ba 100644
--- a/prompts.js
+++ b/prompts.js
@@ -40,7 +40,7 @@ module.exports = [
             },
             {
                 value: 'fontawesomepro',
-                name: 'FontAwesome Pro',
+                name: 'Font Awesome Pro',
                 checked: false,
             },
         ],

From 08ecbeba647bdd1fa496f7986399b463b9abf5dc Mon Sep 17 00:00:00 2001
From: Deluze <bartramaekers99@gmail.com>
Date: Mon, 20 Jul 2020 14:44:30 +0200
Subject: [PATCH 27/33] Add additional null check for form data

---
 .../Default/src/api/util/objectToFormDataConverter.js      | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/generator/templates/Default/src/api/util/objectToFormDataConverter.js b/generator/templates/Default/src/api/util/objectToFormDataConverter.js
index b924668..3cf3249 100644
--- a/generator/templates/Default/src/api/util/objectToFormDataConverter.js
+++ b/generator/templates/Default/src/api/util/objectToFormDataConverter.js
@@ -23,7 +23,6 @@ function convert(obj, data, parent) {
             else if (isIterableObject(obj))
                 finalName = `${parent}[${key}]`;
         }
-
         if (val instanceof Blob)
             data.append(finalName, val, val.name);
         else if (val instanceof Date)
@@ -35,9 +34,11 @@ function convert(obj, data, parent) {
             convert(val, data, finalName);
         else if (typeof val === 'boolean')
             data.append(finalName, val ? '1' : '0');
-        else if (val === '')
+        else if (val === '' || val === null)
             data.append(finalName, '');
-        else if (val || typeof val === 'number')
+        else if (typeof val === 'number')
+            data.append(finalName, val);
+        else if (val)
             data.append(finalName, val);
     });
 

From 4fa494c44954ac7253b2fdd6d89e12fde343012e Mon Sep 17 00:00:00 2001
From: Deluze <bartramaekers99@gmail.com>
Date: Mon, 20 Jul 2020 14:46:19 +0200
Subject: [PATCH 28/33] Add additional null check for form data

---
 .../Default/src/api/implementation/app/wrapper.js      | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/generator/templates/Default/src/api/implementation/app/wrapper.js b/generator/templates/Default/src/api/implementation/app/wrapper.js
index 7d85772..d0b0df4 100644
--- a/generator/templates/Default/src/api/implementation/app/wrapper.js
+++ b/generator/templates/Default/src/api/implementation/app/wrapper.js
@@ -11,13 +11,17 @@ import handle from './index';
  * @return {Promise<AxiosResponse>}
  */
 function getPaginated(url, page = 1, perPage = 10, search, sortBy, descending, params) {
+    if (search)
+        params.search = search;
+    if (sortBy)
+        params.sortBy = sortBy;
+    if (typeof descending !== 'undefined')
+        params.desc = descending ? '1' : '0';
+
     return handle.get(url, {
         params: {
             page: page,
             perPage: perPage,
-            search: search ? search : undefined,
-            sortBy: sortBy ? sortBy : undefined,
-            desc: typeof descending === 'undefined' ? undefined : (descending ? '1' : '0'),
             ...params,
         },
     });

From d9984461f6b17656f144a0810a9b82e70dad4c60 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Tue, 21 Jul 2020 10:26:30 +0200
Subject: [PATCH 29/33] Add model.js support in Resource.vue

---
 .../Crud/src/components/Resource.vue          | 33 ++++++++++++++++---
 .../templates/Crud/src/views/UserResource.vue |  4 ++-
 .../src/api/implementation/app/transformer.js |  6 ++++
 .../Default/src/application/models/model.js   |  7 ++++
 .../Default/src/application/models/user.js    |  7 ++++
 5 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/generator/templates/Crud/src/components/Resource.vue b/generator/templates/Crud/src/components/Resource.vue
index 76ca87e..52f0761 100644
--- a/generator/templates/Crud/src/components/Resource.vue
+++ b/generator/templates/Crud/src/components/Resource.vue
@@ -36,15 +36,14 @@
         </vuetify-resource>
     </v-container>
 </template>
+
 <script>
-import FormDataValues from './../mixins/formDataValues';
 import axios from '../api/implementation/app';
 import VuetifyResource from '@kingscode/vuetify-resource';
 
 export default {
     name: 'Resource',
     components: {VuetifyResource},
-    mixins: [FormDataValues],
     data() {
         return {
             createForm: {values: {}},
@@ -54,6 +53,10 @@ export default {
         };
     },
     props: {
+        modelType: {
+            type: Function,
+            required: false,
+        },
         tableContent: {
             type: Array,
             required: true,
@@ -151,7 +154,15 @@ export default {
             return new Promise((resolve) => {
                 axios.get((this.showResourceUri || this.resourceUri) + '/' + id)
                     .then((response) => {
-                        let item = response.data.data;
+                        let item;
+
+                        if (this.modelType) {
+                            item = new this.modelType();
+                            item.mapResponse(response.data.data);
+                        } else {
+                            item = response.data.data;
+                        }
+
                         resolve({
                             item,
                         });
@@ -168,7 +179,12 @@ export default {
                     if (this.createForm.valid) {
                         this.createHandler(this.createForm.values)
                             .then((response) => {
-                                this.createForm.values = {};
+                                if (this.modelType) {
+                                    this.createForm.values = new this.modelType();
+                                } else {
+                                    this.createForm.values = {};
+                                }
+
                                 if (typeof this.afterCreate === 'function') {
                                     this.afterCreate(response.data).then(() => {
                                         resolve();
@@ -196,6 +212,7 @@ export default {
                 process.nextTick(() => {
                     if (this.updateForm.valid) {
                         this.updateForm.values.id = selected[0].id;
+
                         this.updateHandler(this.updateForm.values)
                             .then((response) => {
                                 if (typeof this.afterUpdate === 'function') {
@@ -243,7 +260,13 @@ export default {
                 this.beforeOpenUpdate(selected);
                 return;
             }
-            this.updateForm.values = selected[0];
+
+            if (this.modelType) {
+                this.updateForm.values = new this.modelType();
+                this.updateForm.values.mapResponse(selected[0]);
+            } else {
+                this.updateForm.values = {};
+            }
         },
     },
 };
diff --git a/generator/templates/Crud/src/views/UserResource.vue b/generator/templates/Crud/src/views/UserResource.vue
index 7b8beaf..1cada20 100644
--- a/generator/templates/Crud/src/views/UserResource.vue
+++ b/generator/templates/Crud/src/views/UserResource.vue
@@ -7,6 +7,7 @@
             :update-handler="updateHandler"
             :delete-handler="deleteHandler"
             :create-handler="createHandler"
+            :model-type="modelType"
             resource-uri="user"
         />
     </v-container>
@@ -14,8 +15,8 @@
 
 <script lang="js">
 import Resource from '@/components/Resource.vue';
-
 import {create, destroy, update} from '../api/endpoints/user.js';
+import User from '../application/models/user.js';
 
 export default {
     name: 'UserResource',
@@ -26,6 +27,7 @@ export default {
         updateHandler: () => update,
         deleteHandler: () => destroy,
         createHandler: () => create,
+        modelType: () => User,
         tableContent: () => [
             {
                 text: 'Naam',
diff --git a/generator/templates/Default/src/api/implementation/app/transformer.js b/generator/templates/Default/src/api/implementation/app/transformer.js
index f645d55..ecd22b8 100644
--- a/generator/templates/Default/src/api/implementation/app/transformer.js
+++ b/generator/templates/Default/src/api/implementation/app/transformer.js
@@ -26,7 +26,13 @@ function transformResponse(response) {
  */
 function transformRequest(data) {
     if (data instanceof Model) {
+        const isPutRequest = data._method === 'put';
+
         data = data.mapForRequest();
+
+        if (isPutRequest) {
+            data._method = 'put';
+        }
     }
 
     if (data) {
diff --git a/generator/templates/Default/src/application/models/model.js b/generator/templates/Default/src/application/models/model.js
index afc3e89..d699321 100644
--- a/generator/templates/Default/src/application/models/model.js
+++ b/generator/templates/Default/src/application/models/model.js
@@ -8,6 +8,13 @@ class Model {
     mapForRequest() {
         throw new Error(`${this.constructor.name}::mapForRequest unset`);
     }
+
+    /**
+     * @param data {{}}
+     */
+    mapResponse(data) {
+        throw new Error(`${this.constructor.name}::mapResponse unset, keys: ${Object.keys(data).join(', ')}`);
+    }
 }
 
 export default Model;
diff --git a/generator/templates/Default/src/application/models/user.js b/generator/templates/Default/src/application/models/user.js
index 842cbcb..27ceefe 100644
--- a/generator/templates/Default/src/application/models/user.js
+++ b/generator/templates/Default/src/application/models/user.js
@@ -1,6 +1,7 @@
 import Model from './model.js';
 
 class User extends Model {
+    id = 0;
     name = '';
     email = '';
 
@@ -10,6 +11,12 @@ class User extends Model {
             email: this.email,
         };
     }
+
+    mapResponse(data) {
+        this.id = data.id;
+        this.name = data.name;
+        this.email = data.email;
+    }
 }
 
 export default User;

From 8ad5ddc0546668085068e14a756fd571774de4b8 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Tue, 21 Jul 2020 10:49:05 +0200
Subject: [PATCH 30/33] Audit packages

---
 package-lock.json | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..c95749e
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,35 @@
+{
+  "name": "vue-cli-plugin-kingscode-scaffold",
+  "version": "0.8.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "file-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/file-match/-/file-match-1.0.2.tgz",
+      "integrity": "sha1-ycrSZdLIrfOoFHWw30dYWQafrvc=",
+      "requires": {
+        "utils-extend": "^1.0.6"
+      }
+    },
+    "file-system": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/file-system/-/file-system-2.2.2.tgz",
+      "integrity": "sha1-fWWDPjojR9zZVqgTxncVPtPt2Yc=",
+      "requires": {
+        "file-match": "^1.0.1",
+        "utils-extend": "^1.0.4"
+      }
+    },
+    "qs": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
+      "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ=="
+    },
+    "utils-extend": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/utils-extend/-/utils-extend-1.0.8.tgz",
+      "integrity": "sha1-zP17ZFQPjpDuIe7Fd2nQZRyril8="
+    }
+  }
+}

From 17532a046987238724003122a839f9ddeddec1ab Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Tue, 21 Jul 2020 12:33:30 +0200
Subject: [PATCH 31/33] Fix undefined search

---
 .../templates/Crud/src/components/Resource.vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/generator/templates/Crud/src/components/Resource.vue b/generator/templates/Crud/src/components/Resource.vue
index 52f0761..d376f24 100644
--- a/generator/templates/Crud/src/components/Resource.vue
+++ b/generator/templates/Crud/src/components/Resource.vue
@@ -131,13 +131,19 @@ export default {
                     sorting.sortBy = sortBy[0];
                     sorting.desc = sortDesc[0] ? 1 : 0;
                 }
+
+                const params = {
+                    page: page,
+                    perPage: itemsPerPage,
+                    ...sorting,
+                };
+
+                if (search) {
+                    params.search = search;
+                }
+
                 axios.get(this.resourceUri, {
-                        params: {
-                            search: search || undefined,
-                            page: page,
-                            perPage: itemsPerPage,
-                            ...sorting,
-                        },
+                        params: params,
                     })
                     .then((response) => {
                         const items = this.mapDataResponse(response.data.data);

From 687da2ae6dee303186b737bd0e69f8af0ff02d77 Mon Sep 17 00:00:00 2001
From: Bart <32544586+Deluze@users.noreply.github.com>
Date: Tue, 21 Jul 2020 13:37:57 +0200
Subject: [PATCH 32/33] Update
 generator/templates/Default/src/components/BaseForm.vue

Co-authored-by: Martijn Zentjens <martijn@kingscode.nl>
---
 generator/templates/Default/src/components/BaseForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/generator/templates/Default/src/components/BaseForm.vue b/generator/templates/Default/src/components/BaseForm.vue
index 50ca43b..cc90b06 100644
--- a/generator/templates/Default/src/components/BaseForm.vue
+++ b/generator/templates/Default/src/components/BaseForm.vue
@@ -5,7 +5,7 @@ export default {
     name: 'Form',
     props: {
         errors: {
-            default: () => ({}),
+            default: () => {},
             type: Object,
         },
     },

From 20dbe5b435b66c446e99e428a2ef970429461361 Mon Sep 17 00:00:00 2001
From: DeluzeDEV <bartramaekers99@gmail.com>
Date: Tue, 21 Jul 2020 14:58:21 +0200
Subject: [PATCH 33/33] Add back vuetify to transpiled dependencies

---
 generator/templates/Default/vue.config.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/generator/templates/Default/vue.config.js b/generator/templates/Default/vue.config.js
index 3f75bd6..8796b8d 100644
--- a/generator/templates/Default/vue.config.js
+++ b/generator/templates/Default/vue.config.js
@@ -1,4 +1,7 @@
 module.exports = {
+    transpileDependencies: [
+        'vuetify',
+    ],
     publicPath: process.env.VUE_APP_PUBLIC_PATH,
     pwa: {
         workboxPluginMode: 'GenerateSW',