add sign up module

middleware/auth.js

+export default function(context) {
+   console.log('[LOG]: middleware is running ...')
+}
\ No newline at end of file

middleware/stats.js

+import http from 'http'
+
+export default function ({ route }) {
+  return http.post('http://my-stats-api.com', {
+    url: route.fullPath
+  })
+}
\ No newline at end of file

nuxt.config.js

@@ -41,7 +41,12 @@ export default {
   modules: [
     // https://go.nuxtjs.dev/bootstrap
     'bootstrap-vue/nuxt',
+    '@nuxtjs/axios',
+    '@nuxtjs/auth-next',
   ],
+  auth: {
+    // Options
+  },
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {

package.json

@@ -9,13 +9,21 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
+    "@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54",
+    "@nuxtjs/axios": "^5.13.6",
+    "axios": "^1.2.1",
     "bootstrap": "^4.6.2",
-    "bootstrap-vue": "^2.22.0",
+    "bootstrap-vue": "^2.23.1",
     "core-js": "^3.25.3",
     "jsonwebtoken": "^9.0.0",
     "nuxt": "^2.15.8",
+    "prism-themes": "^1.9.0",
     "vue": "^2.7.10",
     "vue-server-renderer": "^2.7.10",
     "vue-template-compiler": "^2.7.10"
+  },
+  "devDependencies": {
+    "sass": "^1.57.1",
+    "sass-loader": "^10.4.1"
   }
 }

pages/home/index.vue

@@ -3,20 +3,32 @@
   </template>
   <script>
   import { onMounted } from 'vue';
+  import axios from 'axios';
+  import VueAxios from 'vue-axios';
 
-  export default {
-    name: "Home",
-    setup() {
-        onMounted(async ()=> {
-        await fetch('http://localhost:3000/api/', {
-        method: 'POST',
-        headers: {'Content-Type': 'application/json'},
-        credentials: 'include',
-      });
-        })
-    }
-  }
-  </script>
+//   export default {
+//     name: "Home",
+//     data() {
+//         return {
+//             users: [],
+//         }
+//     },
+//     setup() {
+//         onMounted(async ()=> {
+//         await fetch('http://localhost:3000/api/login', {
+//         method: 'GET',
+//         headers: {'Content-Type': 'application/json'},
+//         data: Response.data,
+//         credentials: 'include',
+//       });
+//         })
+//     }
+    
+//   }
+//   </script>
+//   <script>
+// console.log(data);
+// </script>
   <style>
   </style>
   

pages/index.vue

@@ -84,7 +84,7 @@ export default {
   },
   methods: {
     login() {
-      fetch("http://localhost:3000/login", {
+      fetch("http://127.0.0.1:8000/api/login", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -94,6 +94,7 @@ export default {
           password: this.password,
         }),
       });
+	  this.$router.push('home');
     },
   },
 };

pages/register.vue

+<template>
+    <div class="container"
+      style="
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+      ">
+    <div id="form-group">
+    <form @submit.prevent="signin">
+        <label>Name :</label>
+            <input type="text" class="form-control"
+            placeholder="name" v-model="name"  required>
+            <label>Email :</label>
+            <input type="email" class="form-control"
+            placeholder="Email" v-model="email"  required>
+    
+            <label>Password :</label>  
+            <input type="password"
+            class="form-control"
+            placeholder="password" v-model="password" required> 
+            <label>Confirm Password :</label>  
+            <input type="password"
+            class="form-control"
+            placeholder="Confirm_password" required>           
+            <div class="button">
+            <button class="submit" type="submit">Sign up here</button>
+            </div>
+         
+    </form>
+    </div> 
+</div>
+    </template>
+
+<script>
+import { reactive } from "vue";
+
+export default {
+  data: () => {
+    return {
+      name: "",
+      email: "",
+      password: "",
+    };
+  },
+  methods: {
+    signin() {
+      fetch("http://127.0.0.1:8000/api/register", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name: this.name,
+          email: this.email,
+          password: this.password,
+        }),
+      });
+	  this.$router.push('/');
+    },
+  },
+};
+</script>
+<style scoped>
+#form-group {
+  height: 50%;
+  width: 50%;
+  border: 1px solid black;
+  padding: 12px;
+  padding-top: 60px;
+  display: flex;
+  justify-content: center;
+  background-color: #17a2b8;
+  border-radius: 10%;
+  font-weight: 600;
+}
+</style>
\ No newline at end of file