Vue.js 2 Design Patterns and Best Practices

Creating a connection status bar

Let's have some fun with this concept. We can make a components folder and subsequently a new component named ConnectionStatus.vue. Inside of this file we can create a status bar that is shown to the user whenever they're online or offline:

<template>  <div>    <span v-if="isConnected === true" class="bar connected">      Connected to the server.    </span>    <span v-else class="bar disconnected">      Disconnected from the server.    </span>  </div></template><script>export default {  props: ['isConnected'],};</script><style>.bar {  position: absolute;  bottom: 0;  left: 0;  right: 0;  text-align: center;  padding: 5px;}.connected {  background: greenyellow;  color: black;}.disconnected {  background: red;  color: white;}</style>

Whilst we ...