Merge pull request #104 from coreui/dev-vnext

v2.0.0-beta.6

CHANGELOG.md

@@ -1,5 +1,21 @@
 ## [vue](./README.md) version `changelog`
 
+##### `v2.0.0-beta.6`
+- fix: typo `DafaultAside` to `DefaultAside` - thanks @DamianLion
+- feat(router): `Users/User Details` Breadcrumb example with `/users/:id`
+- refactor(router): add dynamic imports for Webpack code splitting
+- refactor: remove empty `<style>` sections from `vue` files
+- refactor(Pages): add `b-form`, `b-form-input` and `autocomplete` to Login 
+- refactor(Pages): add `b-form`, `b-form-input` and `autocomplete` to Register 
+- chore: update `@coreui/coreui` to `2.0.3`
+- chore: update `@vue/cli-plugin-babel` to `3.0.0-rc.3`
+- chore: update `@vue/cli-plugin-e2e-nightwatch` to `3.0.0-rc.3`
+- chore: update `@vue/cli-plugin-eslint` to `3.0.0-rc.3`
+- chore: update `@vue/cli-plugin-unit-jest` to `3.0.0-rc.3`
+- chore: update `@vue/cli-service` to `3.0.0-rc.3`
+- chore: update `@vue/test-utils` to `3.0.0-rc.3`
+- chore: update `babel-jest` to `23.2.0`     
+
 ##### `v2.0.0-beta.5`
 - chore: move tooling to `vue-cli v3.0.0-rc.2`
 - refactor: move from `static/img` to `public/img` dir

jest.config.js

@@ -17,6 +17,7 @@ module.exports = {
     'jest-serializer-vue'
   ],
   testMatch: [
-    '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))'
+    '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))',
+    '<rootDir>/tests/unit/Dashboard.spec.js'
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.6",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
@@ -14,9 +14,9 @@
     "test:e2e": "vue-cli-service test:e2e"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.2",
+    "@coreui/coreui": "^2.0.3",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
-    "@coreui/icons": "^0.2.0",
+    "@coreui/icons": "0.2.0",
     "@coreui/vue": "^2.0.0-beta.2",
     "bootstrap": "^4.1.1",
     "bootstrap-vue": "^2.0.0-rc.11",
@@ -28,19 +28,19 @@
     "perfect-scrollbar": "^1.4.0",
     "simple-line-icons": "^2.4.1",
     "vue": "^2.5.16",
-    "vue-chartjs": "^3.3.1",
+    "vue-chartjs": "^3.3.2",
     "vue-perfect-scrollbar": "^0.1.0",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.0-rc.2",
+    "@vue/cli-plugin-babel": "^3.0.0-rc.3",
-    "@vue/cli-plugin-e2e-nightwatch": "^3.0.0-rc.2",
+    "@vue/cli-plugin-e2e-nightwatch": "^3.0.0-rc.3",
-    "@vue/cli-plugin-eslint": "^3.0.0-rc.2",
+    "@vue/cli-plugin-eslint": "^3.0.0-rc.3",
-    "@vue/cli-plugin-unit-jest": "^3.0.0-rc.2",
+    "@vue/cli-plugin-unit-jest": "^3.0.0-rc.3",
-    "@vue/cli-service": "^3.0.0-rc.2",
+    "@vue/cli-service": "^3.0.0-rc.3",
-    "@vue/test-utils": "^1.0.0-beta.19",
+    "@vue/test-utils": "^1.0.0-beta.20",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^23.0.1",
+    "babel-jest": "^23.2.0",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.3",
     "vue-template-compiler": "^2.5.16"

src/containers/DefaultContainer.vue

@@ -8,8 +8,8 @@
       </b-link>
       <SidebarToggler class="d-md-down-none" display="lg" />
       <b-navbar-nav class="d-md-down-none">
-        <b-nav-item class="px-3">Dashboard</b-nav-item>
+        <b-nav-item class="px-3" to="/dashboard">Dashboard</b-nav-item>
-        <b-nav-item class="px-3">Users</b-nav-item>
+        <b-nav-item class="px-3" to="/users" exact>Users</b-nav-item>
         <b-nav-item class="px-3">Settings</b-nav-item>
       </b-navbar-nav>
       <b-navbar-nav class="ml-auto">
@@ -37,7 +37,7 @@
         <SidebarMinimizer/>
       </AppSidebar>
       <main class="main">
-        <breadcrumb :list="list"/>
+        <Breadcrumb :list="list"/>
         <div class="container-fluid">
           <router-view></router-view>
         </div>
@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import nav from '../_nav'
+import nav from '@/_nav'
 import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
 import DefaultAside from './DefaultAside'
 import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
@@ -87,7 +87,7 @@ export default {
       return this.$route.name
     },
     list () {
-      return this.$route.matched
+      return this.$route.matched.filter((route) => route.name || route.meta.label )
     }
   }
 }

src/router/index.js

@@ -2,57 +2,61 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 // Containers
-import DefaultContainer from '@/containers/DefaultContainer'
+const DefaultContainer = () => import('@/containers/DefaultContainer')
 
 // Views
-import Dashboard from '@/views/Dashboard'
+const Dashboard = () => import('@/views/Dashboard')
 
-import Colors from '@/views/theme/Colors'
+const Colors = () => import('@/views/theme/Colors')
-import Typography from '@/views/theme/Typography'
+const Typography = () => import('@/views/theme/Typography')
 
-import Charts from '@/views/Charts'
+const Charts = () => import('@/views/Charts')
-import Widgets from '@/views/Widgets'
+const Widgets = () => import('@/views/Widgets')
 
 // Views - Components
-import Cards from '@/views/base/Cards'
+const Cards = () => import('@/views/base/Cards')
-import Forms from '@/views/base/Forms'
+const Forms = () => import('@/views/base/Forms')
-import Switches from '@/views/base/Switches'
+const Switches = () => import('@/views/base/Switches')
-import Tables from '@/views/base/Tables'
+const Tables = () => import('@/views/base/Tables')
-import Tabs from '@/views/base/Tabs'
+const Tabs = () => import('@/views/base/Tabs')
-import Breadcrumbs from '@/views/base/Breadcrumbs'
+const Breadcrumbs = () => import('@/views/base/Breadcrumbs')
-import Carousels from '@/views/base/Carousels'
+const Carousels = () => import('@/views/base/Carousels')
-import Collapses from '@/views/base/Collapses'
+const Collapses = () => import('@/views/base/Collapses')
-import Jumbotrons from '@/views/base/Jumbotrons'
+const Jumbotrons = () => import('@/views/base/Jumbotrons')
-import ListGroups from '@/views/base/ListGroups'
+const ListGroups = () => import('@/views/base/ListGroups')
-import Navs from '@/views/base/Navs'
+const Navs = () => import('@/views/base/Navs')
-import Navbars from '@/views/base/Navbars'
+const Navbars = () => import('@/views/base/Navbars')
-import Paginations from '@/views/base/Paginations'
+const Paginations = () => import('@/views/base/Paginations')
-import Popovers from '@/views/base/Popovers'
+const Popovers = () => import('@/views/base/Popovers')
-import ProgressBars from '@/views/base/ProgressBars'
+const ProgressBars = () => import('@/views/base/ProgressBars')
-import Tooltips from '@/views/base/Tooltips'
+const Tooltips = () => import('@/views/base/Tooltips')
 
 // Views - Buttons
-import StandardButtons from '@/views/buttons/StandardButtons'
+const StandardButtons = () => import('@/views/buttons/StandardButtons')
-import ButtonGroups from '@/views/buttons/ButtonGroups'
+const ButtonGroups = () => import('@/views/buttons/ButtonGroups')
-import Dropdowns from '@/views/buttons/Dropdowns'
+const Dropdowns = () => import('@/views/buttons/Dropdowns')
-import BrandButtons from '@/views/buttons/BrandButtons'
+const BrandButtons = () => import('@/views/buttons/BrandButtons')
 
 // Views - Icons
-import Flags from '@/views/icons/Flags'
+const Flags = () => import('@/views/icons/Flags')
-import FontAwesome from '@/views/icons/FontAwesome'
+const FontAwesome = () => import('@/views/icons/FontAwesome')
-import SimpleLineIcons from '@/views/icons/SimpleLineIcons'
+const SimpleLineIcons = () => import('@/views/icons/SimpleLineIcons')
-import CoreUIIcons from '@/views/icons/CoreUIIcons'
+const CoreUIIcons = () => import('@/views/icons/CoreUIIcons')
 
 // Views - Notifications
-import Alerts from '@/views/notifications/Alerts'
+const Alerts = () => import('@/views/notifications/Alerts')
-import Badges from '@/views/notifications/Badges'
+const Badges = () => import('@/views/notifications/Badges')
-import Modals from '@/views/notifications/Modals'
+const Modals = () => import('@/views/notifications/Modals')
 
 // Views - Pages
-import Page404 from '@/views/pages/Page404'
+const Page404 = () => import('@/views/pages/Page404')
-import Page500 from '@/views/pages/Page500'
+const Page500 = () => import('@/views/pages/Page500')
-import Login from '@/views/pages/Login'
+const Login = () => import('@/views/pages/Login')
-import Register from '@/views/pages/Register'
+const Register = () => import('@/views/pages/Register')
+
+// Users
+const Users = () => import('@/views/users/Users')
+const User = () => import('@/views/users/User')
 
 Vue.use(Router)
 
@@ -102,6 +106,25 @@ export default new Router({
           name: 'Widgets',
           component: Widgets
         },
+        {
+          path: 'users',
+          meta: { label: 'Users'},
+          component: {
+            render (c) { return c('router-view') }
+          },
+          children: [
+            {
+              path: '',
+              component: Users,
+            },
+            {
+              path: ':id',
+              meta: { label: 'User Details'},
+              name: 'User',
+              component: User,
+            },
+          ]
+        },
         {
           path: 'base',
           redirect: '/base/cards',

src/views/base/Jumbotrons.vue

@@ -89,6 +89,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/base/ListGroups.vue

@@ -250,6 +250,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/base/Navbars.vue

@@ -162,6 +162,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/base/Navs.vue

@@ -125,6 +125,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/base/Paginations.vue

@@ -97,6 +97,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/base/ProgressBars.vue

@@ -201,6 +201,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/base/Tooltips.vue

@@ -143,6 +143,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/pages/Login.vue

@@ -6,24 +6,26 @@
           <b-card-group>
             <b-card no-body class="p-4">
               <b-card-body>
-                <h1>Login</h1>
+                <b-form>
-                <p class="text-muted">Sign In to your account</p>
+                  <h1>Login</h1>
-                <b-input-group class="mb-3">
+                  <p class="text-muted">Sign In to your account</p>
-                  <b-input-group-prepend><b-input-group-text><i class="icon-user"></i></b-input-group-text></b-input-group-prepend>
+                  <b-input-group class="mb-3">
-                  <input type="text" class="form-control" placeholder="Username">
+                    <b-input-group-prepend><b-input-group-text><i class="icon-user"></i></b-input-group-text></b-input-group-prepend>
-                </b-input-group>
+                    <b-form-input type="text" class="form-control" placeholder="Username" autocomplete="username email" />
-                <b-input-group class="mb-4">
+                  </b-input-group>
-                  <b-input-group-prepend><b-input-group-text><i class="icon-lock"></i></b-input-group-text></b-input-group-prepend>
+                  <b-input-group class="mb-4">
-                  <input type="password" class="form-control" placeholder="Password">
+                    <b-input-group-prepend><b-input-group-text><i class="icon-lock"></i></b-input-group-text></b-input-group-prepend>
-                </b-input-group>
+                    <b-form-input type="password" class="form-control" placeholder="Password" autocomplete="current-password" />
-                <b-row>
+                  </b-input-group>
-                  <b-col cols="6">
+                  <b-row>
-                    <b-button variant="primary" class="px-4">Login</b-button>
+                    <b-col cols="6">
-                  </b-col>
+                      <b-button variant="primary" class="px-4">Login</b-button>
-                  <b-col cols="6" class="text-right">
+                    </b-col>
-                    <b-button variant="link" class="px-0">Forgot password?</b-button>
+                    <b-col cols="6" class="text-right">
-                  </b-col>
+                      <b-button variant="link" class="px-0">Forgot password?</b-button>
-                </b-row>
+                    </b-col>
+                  </b-row>
+                </b-form>
               </b-card-body>
             </b-card>
             <b-card no-body class="text-white bg-primary py-5 d-md-down-none" style="width:44%">

src/views/pages/Register.vue

@@ -5,37 +5,39 @@
         <b-col md="6" sm="8">
           <b-card no-body class="mx-4">
             <b-card-body class="p-4">
-              <h1>Register</h1>
+              <b-form>
-              <p class="text-muted">Create your account</p>
+                <h1>Register</h1>
-              <b-input-group class="mb-3">
+                <p class="text-muted">Create your account</p>
-                <b-input-group-prepend>
+                <b-input-group class="mb-3">
-                  <b-input-group-text><i class="icon-user"></i></b-input-group-text>
+                  <b-input-group-prepend>
-                </b-input-group-prepend>
+                    <b-input-group-text><i class="icon-user"></i></b-input-group-text>
-                <input type="text" class="form-control" placeholder="Username">
+                  </b-input-group-prepend>
-              </b-input-group>
+                  <b-form-input type="text" class="form-control" placeholder="Username" autocomplete="username" />
+                </b-input-group>
 
-              <b-input-group class="mb-3">
+                <b-input-group class="mb-3">
-                <b-input-group-prepend>
+                  <b-input-group-prepend>
-                  <b-input-group-text>@</b-input-group-text>
+                    <b-input-group-text>@</b-input-group-text>
-                </b-input-group-prepend>
+                  </b-input-group-prepend>
-                <input type="text" class="form-control" placeholder="Email">
+                  <b-form-input type="text" class="form-control" placeholder="Email" autocomplete="email" />
-              </b-input-group>
+                </b-input-group>
 
-              <b-input-group class="mb-3">
+                <b-input-group class="mb-3">
-                <b-input-group-prepend>
+                  <b-input-group-prepend>
-                  <b-input-group-text><i class="icon-lock"></i></b-input-group-text>
+                    <b-input-group-text><i class="icon-lock"></i></b-input-group-text>
-                </b-input-group-prepend>
+                  </b-input-group-prepend>
-                <input type="password" class="form-control" placeholder="Password">
+                  <b-form-input type="password" class="form-control" placeholder="Password" autocomplete="new-password" />
-              </b-input-group>
+                </b-input-group>
 
-              <b-input-group class="mb-4">
+                <b-input-group class="mb-4">
-                <b-input-group-prepend>
+                  <b-input-group-prepend>
-                  <b-input-group-text><i class="icon-lock"></i></b-input-group-text>
+                    <b-input-group-text><i class="icon-lock"></i></b-input-group-text>
-                </b-input-group-prepend>
+                  </b-input-group-prepend>
-                <input type="password" class="form-control" placeholder="Repeat password">
+                  <b-form-input type="password" class="form-control" placeholder="Repeat password" autocomplete="new-password" />
-              </b-input-group>
+                </b-input-group>
 
-              <b-button variant="success" block>Create Account</b-button>
+                <b-button variant="success" block>Create Account</b-button>
+              </b-form>
             </b-card-body>
             <b-card-footer class="p-4">
               <b-row>

src/views/theme/ColorTheme.vue

@@ -24,6 +24,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/theme/ColorView.vue

@@ -40,6 +40,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/users/User.vue

@@ -0,0 +1,51 @@
+<template>
+  <b-row>
+    <b-col cols="12" lg="6">
+      <b-card 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>
+        <template slot="footer">
+          <b-button @click="goBack">Back</b-button>
+        </template>
+      </b-card>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+import usersData from './UsersData'
+export default {
+  name: 'User',
+  props: {
+    caption: {
+      type: String,
+      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'},
+      ],
+    }
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1)
+      // this.$router.replace({path: '/users'})
+    }
+  }
+}
+</script>

src/views/users/Users.vue

@@ -0,0 +1,99 @@
+<template>
+  <b-row>
+    <b-col cols="12" xl="6">
+      <transition name="slide">
+      <b-card :header="caption">
+        <b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" @row-clicked="rowClicked">
+          <template slot="id" slot-scope="data">
+            <strong>{{data.item.id}}</strong>
+          </template>
+          <template slot="name" slot-scope="data">
+            <strong>{{data.item.name}}</strong>
+          </template>
+          <template slot="status" slot-scope="data">
+            <b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
+          </template>
+        </b-table>
+        <nav>
+          <b-pagination size="sm" :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
+        </nav>
+      </b-card>
+      </transition>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+import usersData from './UsersData'
+export default {
+  name: 'Users',
+  props: {
+    caption: {
+      type: String,
+      default: 'Users'
+    },
+    hover: {
+      type: Boolean,
+      default: true
+    },
+    striped: {
+      type: Boolean,
+      default: true
+    },
+    bordered: {
+      type: Boolean,
+      default: false
+    },
+    small: {
+      type: Boolean,
+      default: false
+    },
+    fixed: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: () => {
+    return {
+      items: usersData.filter((user) => user.id < 42),
+      fields: [
+        {key: 'id'},
+        {key: 'name'},
+        {key: 'registered'},
+        {key: 'role'},
+        {key: 'status'}
+      ],
+      currentPage: 1,
+      perPage: 5,
+      totalRows: 0
+    }
+  },
+  computed: {
+  },
+  methods: {
+    getBadge (status) {
+      return status === 'Active' ? 'success'
+        : status === 'Inactive' ? 'secondary'
+          : status === 'Pending' ? 'warning'
+            : status === 'Banned' ? 'danger' : 'primary'
+    },
+    getRowCount (items) {
+      return items.length
+    },
+    userLink (id) {
+      return `users/${id.toString()}`
+    },
+    rowClicked (item) {
+      const userLink = this.userLink(item.id)
+      this.$router.push({path: userLink})
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+.card-body >>> table > tbody > tr > td {
+  cursor: pointer;
+}
+</style>

src/views/users/UsersData.js

@@ -0,0 +1,31 @@
+const usersData = [
+  {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
+  {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 23, name: 'Einar Randall', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 24, name: 'Félix Troels', registered: '2018/03/21', role: 'Staff', status: 'Active'},
+  {id: 25, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
+  {id: 42, name: 'Ford Prefex', registered: '2001/05/21', role: 'Alien', status: 'Don\'t panic!'}
+]
+
+export default usersData

src/views/widgets/Widget03.vue

@@ -29,6 +29,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>