feat: Bootstrap Vue components changed to Coreui-Vue components

src/views/users/User.vue

@@ -1,21 +1,24 @@
 <template>
-  <b-row>
-    <b-col cols="12" lg="6">
-      <b-card no-header>
+  <CRow>
+    <CCol cols="12"
+          lg="6"
+    >
+      <CCard no-header>
         <template slot="header">
           User id:  {{ $route.params.id }}
         </template>
-        <b-table striped small fixed responsive="sm" :items="items($route.params.id)" :fields="fields">
-          <template slot="value" slot-scope="data">
-            <strong>{{data.item.value}}</strong>
-          </template>
-        </b-table>
+        <CTable striped
+                small
+                fixed
+                :items="items($route.params.id)"
+                :fields="$options.fields"
+        />
         <template slot="footer">
-          <b-button @click="goBack">Back</b-button>
+          <CButton @click="goBack">Back</CButton>
         </template>
-      </b-card>
-    </b-col>
-  </b-row>
+      </CCard>
+    </CCol>
+  </CRow>
 </template>
 
 <script>
@@ -28,20 +31,16 @@ export default {
       default: 'User id'
     },
   },
-  data: () => {
-    return {
-      items: (id) => {
-        const user = usersData.find( user => user.id.toString() === id)
-        const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
-        return userDetails.map(([key, value]) => {return {key: key, value: value}})
-      },
-      fields: [
-        {key: 'key'},
-        {key: 'value'},
-      ],
-    }
-  },
+  fields: [
+    { key: 'key', _style:'width:150px'},
+    { key: 'value' , _style:'width:150px;', _classes:'font-weight-bold'}
+  ],
   methods: {
+    items (id) {
+      const user = usersData.find( user => user.id.toString() === id)
+      const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
+      return userDetails.map(([key, value]) => {return {key: key, value: value}})
+    },
     goBack() {
       this.$router.go(-1)
       // this.$router.replace({path: '/users'})