Search⌘ K
Home
Courses
Jump Start with Vue 3

Example: The Employee Directory

Explore how to manage application state using Vuex in a Vue 3 employee directory example. Learn to set up a Vue project with Vue Router and Vuex, fetch user data with Axios, implement loading states, handle routes, and display user details dynamically.

We'll cover the following...

Let’s add Vuex functionality to our employee directory.

We’ll start with generating a Vue project from scratch with the CLI and opt to manually select features. In addition to the defaults, we want to check the Vue Router and Vuex options.

Index page

Let’s add some markup and CSS to the index page (public/index.html) for the demo.

HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0,
  maximum-scale=1.0">
  <title>Vuex Example - Jump Start Vue.js</title>
  <link rel="stylesheet" type="text/css"
  href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<style type="text/css">
  body {
    background-color: #FFFFFF;
  }
  .ui.menu .item img.logo {
    margin-right: 1.5em;
  }
  .main.container {
    margin-top: 7em;
  }
</style>
</head>
<body>
  <div id="app"></div>
</body>
</html>

CDN link and additional styling

Let’s alter the /src/App.vue file to add a CDN link to the Semantic UI library with some additional styling tweaks.

HTML
<template>
  <div>
    <div class="ui fixed inverted menu">
      <div class="ui container">
        <div class="header item">
          <img class="logo" src="./assets/logo.png">
          Jump Start Vue.js
        </div>
        <router-link class="item" to="/" exact>Home</router-link>
        <router-link class="item" to="/users">Users</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "App",
  methods: {
    ...mapActions(["fetchUsers"])
  },
  created() {
    this.fetchUsers();
  }
};
</script>

We’ll ...