add base URL + navbar

components/Navbar.vue

 <template>
-  <!-- <div>
-    <b-navbar toggleable="lg" type="dark" variant="info" style="background-color: #6f2ca6 !important">
-      <SideBar />
-
-      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle> -->
-
-      <!-- <b-collapse id="nav-collapse" is-nav>
-        <b-navbar-nav>
-          <b-nav-item href="/users">USER</b-nav-item>
-          <b-nav-item href="/categories">CATEGORY</b-nav-item>
-          <b-nav-item href="/products">PRODUCT</b-nav-item>
-          <b-nav-item href="/posts">POST</b-nav-item>
-        </b-navbar-nav> -->
-
-        <!-- Right aligned nav items -->
-        <!-- <b-navbar-nav class="ml-auto">
-          <b-nav-item-dropdown right> -->
-            <!-- Using 'button-content' slot -->
-            <!-- <template #button-content>
-              <em>{{ $auth.$storage.getUniversal("userName") }}</em>
-            </template>
-            <b-dropdown-item href="#">Profile</b-dropdown-item>
-            <b-dropdown-item href="#" @click="logout">Sign Out</b-dropdown-item>
-          </b-nav-item-dropdown>
-        </b-navbar-nav>
-      </b-collapse>
-    </b-navbar>
-  </div> -->
-
   <div>
     <v-toolbar
       dark
       prominent
       src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
     >
-      <v-app-bar-nav-icon></v-app-bar-nav-icon>
+      <v-app-bar-nav-icon />
 
       <v-toolbar-title>
         <v-btn href="/users">
@@ -58,7 +29,7 @@
         </v-btn>
       </v-toolbar-title>
 
-      <v-spacer></v-spacer>
+      <v-spacer />
 
       <v-toolbar-title>{{ $auth.$storage.getUniversal("userName") }}</v-toolbar-title>
 

nuxt.config.js

@@ -52,7 +52,10 @@ export default {
   // Axios module configuration: https://go.nuxtjs.dev/config-axios
   axios: {
     // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
-    baseURL: '/',
+    baseURL: 'http://127.0.0.1:8000/api/',
+    debug: false,
+    proxyHeaders: true,
+    credentials: false,
   },
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify

pages/users/index.vue

 <template>
+  <v-app>
   <div>
+    <div />
     <div>
-    </div>
-    <b-breadcrumb>
-      <b-breadcrumb-item href="/home">
-        <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
-        Home
-      </b-breadcrumb-item>
-      <b-breadcrumb-item href="/home/users">User</b-breadcrumb-item>
-    </b-breadcrumb>
-    <div style="float: right">
-      <b-button v-b-modal.modal-login class="text-white">New User</b-button>
-      <!-- modal create user -->
-      <b-modal id="modal-login" title="Create User" class="modal fade">
-        <Notification :message="error" v-if="error" />
-        <p class="my-4">
-        <form @submit.prevent="createUser">
-          <label>Name :</label>
-          <input type="text" class="form-control mb-2" placeholder="name" v-model="name" max="255" min="1" required />
-          <label>Email :</label>
-          <input type="email" class="form-control mb-2" placeholder="Email" v-model="email" required />
-          <label>Password :</label>
-          <input type="password" class="form-control mb-2" placeholder="password" v-model="password" required />
-        </form>
-        </p>
-        <template #modal-footer>
-          <button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-login')"
-            class="btn btn-danger btn-sm m-1">Close</button>
-          <button @click="createUser" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
+      <v-breadcrumbs :items="items">
+        <template #divider>
+          <v-icon>mdi-chevron-right</v-icon>
         </template>
-      </b-modal>
-      <!-- modal edit user -->
-      <b-modal id="modal-edit" title="Edit User" class="modal fade">
-        <p class="my-4">
-        <form @submit.prevent="">
-          <label>Name :</label>
-          <input type="text" class="form-control mb-2" placeholder="name" v-model="eName" max="255" min="1" required />
-          <label>Email :</label>
-          <input type="email" class="form-control mb-2" placeholder="Email" v-model="eEmail" required />
-          <label>Password :</label>
-          <input type="password" class="form-control mb-2" placeholder="password" v-model="ePassword" required />
-        </form>
-        </p>
-        <template #modal-footer>
-          <button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-edit')"
-            class="btn btn-danger btn-sm m-1">Close</button>
-          <button @click="updateUser(this?.eID)" v-b-modal.modal-close_visit
-            class="btn btn-success btn-sm m-1">Submit</button>
-        </template>
-      </b-modal>
+      </v-breadcrumbs>
     </div>
-    <v-data-table :headers="headers" :items="users" sort-by="calories" class="elevation-1">
-      <template v-slot:top>
-        <v-toolbar flat>
-          <v-toolbar-title>User Manage</v-toolbar-title>
-          <v-divider class="mx-4" inset vertical></v-divider>
-          <v-spacer></v-spacer>
-          <v-dialog v-model="dialog" max-width="500px">
-            <template v-slot:activator="{ on, attrs }">
-              <!-- modal create user -->
+    <div style="float: right">
+      <v-dialog
+        v-model="dialog1"
+        persistent
+        max-width="600px"
+        @submit.prevent="createUser"
+      >
+        <template #activator="{ on, attrs }">
+          <v-btn
+            color="primary"
+            dark
+            v-bind="attrs"
+            v-on="on"
+          >
+            New USER
+          </v-btn>
         </template>
         <v-card>
           <v-card-title>
-                <span class="text-h5">{{ formTitle }}</span>
+            <span class="text-h5">User Profile</span>
           </v-card-title>
           <v-card-text>
             <v-container>
               <v-row>
-                    <v-col cols="12" sm="6" md="4">
-                      <v-text-field v-model="editedItem.name" label="name"></v-text-field>
+                <v-col
+                  cols="12"
+                  sm="6"
+                  md="4"
+                >
+                  <v-text-field
+                    v-model="name"
+                    label="Legal name*"
+                    required
+                  />
                 </v-col>
-                    <v-col cols="12" sm="6" md="4">
-                      <v-text-field v-model="editedItem.id" label="id"></v-text-field>
+                <v-col cols="12">
+                  <v-text-field
+                    v-model="email"
+                    label="Email*"
+                    required
+                  />
                 </v-col>
-                    <v-col cols="12" sm="6" md="4">
-                      <v-text-field v-model="editedItem.email" label="email"></v-text-field>
-                    </v-col>
-                    <v-col cols="12" sm="6" md="4">
-                      <v-text-field v-model="editedItem.created_at" label="created_at"></v-text-field>
-                    </v-col>
-                    <v-col cols="12" sm="6" md="4">
-                      <v-text-field v-model="editedItem.updated_at" label="updated_at"></v-text-field>
+                <v-col cols="12">
+                  <v-text-field
+                    v-model="password"
+                    label="Password*"
+                    type="password"
+                    required
+                  />
                 </v-col>
               </v-row>
             </v-container>
+            <small>*indicates required field</small>
           </v-card-text>
           <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="blue darken-1" text @click="close">
-                  Cancel
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="dialog1 = false"
+            >
+              Close
+            </v-btn>
+            <v-btn
+              color="blue darken-1"
+              text
+              type="submit"
+              @click="dialog1 = false; createUser();"
+            >
+              Save
             </v-btn>
-                <v-btn color="blue darken-1" text @click="save"> Save </v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
-          <v-dialog v-model="dialogDelete" max-width="500px">
+    </div>
+    <!-- modal-create -->
+    <v-dialog
+      v-model="dialog2"
+      persistent
+      max-width="600px"
+    >
       <v-card>
-              <v-card-title class="text-h5">Are you sure you want to delete this item?</v-card-title>
+        <v-card-title>
+          <span class="text-h5">User Edit</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-row>
+              <v-col
+                cols="12"
+                sm="6"
+                md="4"
+              >
+                <v-text-field
+                  v-model="eName"
+                  label="Legal name*"
+                  required
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="eEmail"
+                  label="Email*"
+                  required
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="ePassword"
+                  label="Password*"
+                  type="password"
+                  required
+                />
+              </v-col>
+            </v-row>
+          </v-container>
+          <small>*indicates required field</small>
+        </v-card-text>
         <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="blue darken-1" text @click="closeDelete">Cancel</v-btn>
-                <v-btn color="blue darken-1" text @click="deleteItemConfirm">OK</v-btn>
-                <v-spacer></v-spacer>
+          <v-spacer />
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="dialog2 = false"
+          >
+            Close
+          </v-btn>
+          <v-btn
+            color="blue darken-1"
+            text
+            type="submit"
+            @click="dialog2 = false; updateUser();"
+          >
+            Save
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
+    <v-data-table :headers="headers" :items="users" sort-by="calories" class="elevation-1">
+      <template #top>
+        <v-toolbar flat>
+          <v-toolbar-title>User Manage</v-toolbar-title>
+          <v-divider class="mx-4" inset vertical />
+          <v-spacer />
         </v-toolbar>
       </template>
-      <template v-slot:item.actions="{ item }">
-        <v-icon small class="mr-2" @click="editUser(item)" :id="item.id"> mdi-pencil </v-icon>
-        <v-icon small @click="deleteUser(item.id, item)" :id="item.id"> mdi-delete </v-icon>
+      <template #item.actions="{ item }">
+        <v-icon :id="item.id" small class="mr-2" @click="dialog2 = true; editUser(item);">
+          mdi-pencil
+        </v-icon>
+        <v-icon :id="item.id" small @click="deleteUser(item.id, item)">
+          mdi-delete
+        </v-icon>
       </template>
-      <template v-slot:no-data>
-        <v-btn color="primary" @click="initialize"> Reset </v-btn>
+      <template #no-data>
+        <v-btn color="primary" @click="initialize">
+          Reset
+        </v-btn>
       </template>
     </v-data-table>
   </div>
+</v-app>
 </template>
 <script>
 export default {
@@ -127,21 +182,35 @@ export default {
       name: '',
       password: '',
       error: '',
-      dialog: false,
+      dialog1: false,
+      dialog2: false,
       dialogDelete: false,
       headers: [
         {
           text: 'Name',
           align: 'start',
           sortable: false,
-          value: 'name',
+          value: 'name'
         },
         { text: 'id', value: 'id' },
         { text: 'email', value: 'email' },
         { text: 'status', value: 'id', sortable: false },
         { text: 'created_at', value: 'created_at' },
         { text: 'updated_at', value: 'updated_at' },
-        { text: 'Actions', value: 'actions', sortable: false },
+        { text: 'Actions', value: 'actions', sortable: false }
+      ],
+      items: [
+        {
+          icon: 'mdi-home',
+          text: 'Home',
+          disabled: false,
+          href: '/home'
+        },
+        {
+          text: 'User',
+          disabled: false,
+          href: '/users'
+        }
       ],
       users: [],
       eIndex: [],
@@ -156,7 +225,7 @@ export default {
         id: '',
         email: '',
         created_at: '',
-        updated_at: '',
+        updated_at: ''
       },
       defaultItem: {
         name: '',
@@ -164,61 +233,61 @@ export default {
         email: '',
         status: '',
         created_at: '',
-        updated_at: '',
-      },
+        updated_at: ''
+      }
     }
   },
   computed: {
-    formTitle() {
+    formTitle () {
       return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
-    },
+    }
   },
   watch: {
-    dialog(val) {
+    dialog (val) {
       val || this.close()
     },
-    dialogDelete(val) {
+    dialogDelete (val) {
       val || this.closeDelete()
+    }
   },
-  },
-  created() {
+  created () {
     this.initialize()
     this.getUsers()
   },
   methods: {
-    initialize() {
-      this.users = [],
+    initialize () {
+      this.users = []
       this.editedItem = {}
     },
-    editItem(item) {
+    editItem (item) {
       this.editedIndex = this.users.indexOf(item)
       this.editedItem = Object.assign({}, item)
       this.dialog = true
     },
-    deleteItem(item) {
+    deleteItem (item) {
       this.editedIndex = this.users.indexOf(item)
       this.editedItem = Object.assign({}, item)
       this.dialogDelete = true
     },
-    deleteItemConfirm() {
+    deleteItemConfirm () {
       this.users.splice(this.editedIndex, 1)
       this.closeDelete()
     },
-    close() {
+    close () {
       this.dialog = false
       this.$nextTick(() => {
         this.editedItem = Object.assign({}, this.defaultItem)
         this.editedIndex = -1
       })
     },
-    closeDelete() {
+    closeDelete () {
       this.dialogDelete = false
       this.$nextTick(() => {
         this.editedItem = Object.assign({}, this.defaultItem)
         this.editedIndex = -1
       })
     },
-    save() {
+    save () {
       if (this.editedIndex > -1) {
         Object.assign(this.users[this.editedIndex], this.editedItem)
       } else {
@@ -226,34 +295,35 @@ export default {
       }
       this.close()
     },
-    getUsers() {
+    getUsers () {
       this.$axios
-        .get('/users/',{
+        .get('/users/', {
           headers: {
             'Content-Type': 'application/json',
-        Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
-        },
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+          }
         })
-        .then((response) => (this.users = response.data.data.data))
+        .then(response => (this.users = response.data.data.data))
         .catch(function (error) {
           console.log(error)
         })
     },
-    createUser() {
+    createUser () {
       const self = this
       this.$axios
-      .post('/users/',{
-        headers: {
-        'Content-Type': 'application/json'
-        },
+        .post('/users/', {
           email: this.email,
           password: this.password,
-        name:this.name,
-      })
-      .then(response => {
-        // $bvModal.hide('modal-login');
-        this.$bvModal.hide('modal-login')
-        self.$toast.success('User created successfully!',{
+          name: this.name
+        }, {
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+          }
+        }
+        )
+        .then((response) => {
+          self.$toast.success('User created successfully!', {
             duration: 3000
           })
           console.log(response)
@@ -261,66 +331,75 @@ export default {
           console.log(this.editedItem)
           this.users.push(this.editedItem)
         })
-      .catch(errors => {
+        .catch((errors) => {
           this.$bvModal.hide('modal-login')
           console.log(errors.response.data.message)
           this.message = errors.response.data.message
-        self.$toast.error('something went wrong while trying create!',{
+          self.$toast.error('something went wrong while trying create!', {
             duration: 3000
           })
         })
     },
-    deleteUser(userID, index) {
+    deleteUser (userID, index) {
       const self = this
       this.editedIndex = this.users.indexOf(index)
-      if(confirm("Do you really want to delete?")){
-      try{
+      if (confirm('Do you really want to delete?')) {
+        try {
           this.$axios
             .delete(`/users/${userID}`)
-        .then(response => {
+            .then((response) => {
               console.log(response.data)
               this.users.splice(this.editedIndex, 1)
-          self.$toast.success('User deleted successfully!',{
+              self.$toast.success('User deleted successfully!', {
                 duration: 3000
               })
             })
-      } catch(error){
+        } catch (error) {
           console.log(error)
         }
       }
     },
-    editUser(user) {
-      this.$bvModal.show('modal-edit')
+    editUser (user) {
       this.eID = user.id
       this.eEmail = user.email
       this.eName = user.name
       this.editedIndex = this.users.indexOf(user)
       console.log(this?.eID)
     },
-    updateUser(userID) {
+    updateUser (userID) {
       const self = this
       console.log(this.eName)
       console.log(this.eEmail)
       console.log(this?.eID)
-      try{
       this.$axios
-        .put(`/users/${this?.eID}`,{
+        .put(`/users/${this?.eID}`,
+          {
             email: this.eEmail,
             password: this.ePassword,
-        name:this.eName,} )
-        .then(response => {
-        self.$toast.success('User updated successfully!',{
+            name: this.eName
+          },
+          {
+            headers: {
+              'Content-Type': 'application/json',
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+            }
+          }
+        )
+        .then((response) => {
+          self.$toast.success('User updated successfully!', {
             duration: 3000
           })
           console.log(response)
           this.editedItem = response.data.data
-        this.$bvModal.hide('modal-edit')
           Object.assign(this.users[this.editedIndex], this.editedItem)
         })
-      } catch(error){
+        .catch((error) => {
           console.log(error)
+          self.$toast.error('something went wrong while trying update!', {
+            duration: 3000
+          })
+        })
     }
   }
-  },
 }
 </script>