Jump Start with Vue 3/

...

/

Example: The Employee Directory

Example: The Employee Directory

Walk through a complete code example of state management in Vuex.

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 ...