add logout

components/nav.vue

@@ -31,7 +31,7 @@
             <em>User</em>
           </template>
           <b-dropdown-item href="#">Profile</b-dropdown-item>
-          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
+          <b-dropdown-item href="#" @click="logout">Sign Out</b-dropdown-item>
         </b-nav-item-dropdown>
       </b-navbar-nav>
     </b-collapse>
@@ -44,7 +44,32 @@
 export default {
     name: 'nav'
 }
+
 </script>
 
+<script>
+export default {
+  name: "logout",
+    data() {
+        return {
+            users: [],
+        }
+    },
+ 
+  methods: {
+    logout() {
+      fetch("http://127.0.0.1:8000/api/logout", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+        }),
+      });
+	  this.$router.push('/');
+    },
+  },
+};</script>
+
 <style>
 </style>
\ No newline at end of file

package-lock.json

@@ -18,6 +18,7 @@
         "nuxt": "^2.15.8",
         "prism-themes": "^1.9.0",
         "vue": "^2.7.10",
+        "vue-axios": "^3.5.2",
         "vue-server-renderer": "^2.7.10",
         "vue-template-compiler": "^2.7.10"
       },
@@ -12570,6 +12571,15 @@
         "csstype": "^3.1.0"
       }
     },
+    "node_modules/vue-axios": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-3.5.2.tgz",
+      "integrity": "sha512-GP+dct7UlAWkl1qoP3ppw0z6jcSua5/IrMpjB5O8bh089iIiJ+hdxPYH2NPEpajlYgkW5EVMP95ttXWdas1O0g==",
+      "peerDependencies": {
+        "axios": "*",
+        "vue": "^3.0.0 || ^2.0.0"
+      }
+    },
     "node_modules/vue-client-only": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/vue-client-only/-/vue-client-only-2.1.0.tgz",
@@ -23619,6 +23629,12 @@
         "csstype": "^3.1.0"
       }
     },
+    "vue-axios": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-3.5.2.tgz",
+      "integrity": "sha512-GP+dct7UlAWkl1qoP3ppw0z6jcSua5/IrMpjB5O8bh089iIiJ+hdxPYH2NPEpajlYgkW5EVMP95ttXWdas1O0g==",
+      "requires": {}
+    },
     "vue-client-only": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/vue-client-only/-/vue-client-only-2.1.0.tgz",

package.json

@@ -19,6 +19,7 @@
     "nuxt": "^2.15.8",
     "prism-themes": "^1.9.0",
     "vue": "^2.7.10",
+    "vue-axios": "^3.5.2",
     "vue-server-renderer": "^2.7.10",
     "vue-template-compiler": "^2.7.10"
   },

pages/home/index.vue

 <template>
+  <div>
+    <Nav />
    <h1 style="text-align: center;">HOME</h1>
+  </div>
   </template>
   <script>
   import { onMounted } from 'vue';
   import axios from 'axios';
   import VueAxios from 'vue-axios';
 
+  import Nav from "@/components/Nav";
+
+export default {
+  components: { Nav },
+};
+
 //   export default {
 //     name: "Home",
 //     data() {
@@ -28,7 +37,7 @@
 //   </script>
 //   <script>
 // console.log(data);
-// </script>
+ </script>
   <style>
   </style>
   

pages/index.vue

 <template>
   <div>
-    <Nav />
     <div
       class="container"
       style="

pages/register.vue

@@ -10,7 +10,7 @@
     <form @submit.prevent="signin">
         <label>Name :</label>
             <input type="text" class="form-control"
-            placeholder="name" v-model="name"  required>
+            placeholder="name" v-model="name" max="255" min="1"  required>
             <label>Email :</label>
             <input type="email" class="form-control"
             placeholder="Email" v-model="email"  required>
@@ -24,7 +24,7 @@
             class="form-control"
             placeholder="Confirm_password" required>           
             <div class="button">
-            <button class="submit" type="submit">Sign up here</button>
+            <button class="w-75 btn btn-lg btn-primary" type="submit">Sign up here</button>
             </div>
          
     </form>
@@ -67,11 +67,17 @@ export default {
   width: 50%;
   border: 1px solid black;
   padding: 12px;
-  padding-top: 60px;
+  padding-top: 30px;
   display: flex;
   justify-content: center;
   background-color: #17a2b8;
   border-radius: 10%;
   font-weight: 600;
 }
+.btn {
+    align-items: center;
+    justify-content: center;
+    margin-left: 20px;
+    margin-top: 5px;
+;}
 </style>
\ No newline at end of file