Yes

frontend/components/LoginForm.vue

@@ -1,7 +1,7 @@
 <template>
     <v-card flat>
-        <v-card-text>
         <v-form ref="form" v-model="valid" lazy-validation>
+            <v-card-text>
                 <v-text-field
                     v-model="form.username"
                     :rules="usernameRules"
@@ -18,14 +18,19 @@
                     prepend-icon="mdi-lock"
                     type="password"
                 ></v-text-field>
-            </v-form>
             </v-card-text>
             <v-card-actions>
                 <v-spacer />
-            <v-btn :disabled="!valid" color="success" @click="userLogin">
+                <v-btn
+                    :disabled="!valid"
+                    color="success"
+                    type="submit"
+                    @click.prevent="userLogin"
+                >
                     Login
                 </v-btn>
             </v-card-actions>
+        </v-form>
     </v-card>
 </template>
 

frontend/components/RegisterForm.vue

@@ -1,7 +1,7 @@
 <template>
     <v-card flat>
-        <v-card-text>
         <v-form ref="form" v-model="valid" lazy-validation>
+            <v-card-text>
                 <v-text-field
                     v-model="form.username"
                     :rules="usernameRules"
@@ -35,15 +35,20 @@
                     prepend-icon="mdi-lock"
                     type="password"
                 ></v-text-field>
-            </v-form>
             </v-card-text>
             <v-divider />
             <v-card-actions>
                 <v-spacer />
-            <v-btn :disabled="!valid" color="success" @click="registerUser">
+                <v-btn
+                    :disabled="!valid"
+                    color="success"
+                    type="submit"
+                    @click.prevent="registerUser"
+                >
                     Register
                 </v-btn>
             </v-card-actions>
+        </v-form>
     </v-card>
 </template>
 

frontend/layouts/default.vue

@@ -3,10 +3,13 @@
         <v-app-bar fixed app color="primary" dark>
             <v-btn to="/" text rounded>Simple Notes</v-btn>
             <v-spacer />
+            <div v-if="isAuthenticated">
                 <v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
-            <v-btn v-if="this.$store.state.auth.loggedIn" outlined>
+                <v-btn class="mr-2" outlined>
-                Welcome {{ this.$store.state.auth.user.username }}
+                    Welcome {{ loggedInUser.username }}
                 </v-btn>
+                <v-btn outlined @click="logout">Logout</v-btn>
+            </div>
             <v-btn v-else to="/account" text rounded>Account</v-btn>
         </v-app-bar>
         <v-content>
@@ -18,7 +21,18 @@
 </template>
 
 <script>
-export default {}
+import { mapGetters } from 'vuex'
+
+export default {
+    computed: {
+        ...mapGetters(['isAuthenticated', 'loggedInUser']),
+    },
+    methods: {
+        async logout() {
+            await this.$auth.logout()
+        },
+    },
+}
 </script>
 
 <style>

frontend/nuxt.config.js

@@ -79,6 +79,7 @@ export default {
                         method: 'get',
                         propertyName: 'user',
                     },
+                    logout: false,
                 },
                 autoFetchUser: true,
             },

frontend/store/index.js

@@ -4,4 +4,12 @@ export const mutations = {}
 
 export const actions = {}
 
-export const getters = {}
+export const getters = {
+    isAuthenticated(state) {
+        return state.auth.loggedIn
+    },
+
+    loggedInUser(state) {
+        return state.auth.user
+    },
+}