Vue.js 2 Design Patterns and Best Practices

Navigation bar

The navigation bar component won't have many uses other than to simply display the name of our application. You could change this to include other functionality such as log in/out, adding new chat channels, or any other chat-specific user actions.

Let's make a new component named Navbar.vue in the components folder:

<template>  <div v-once>    <nav class="navbar">      <span>Socket Chat</span>    </nav>  </div></template><script>export default {};</script><style>.navbar {  background-color: blueviolet;  padding: 10px;  margin: 0px;  text-align: center;  color: white;}</style>

You may notice that the v-once directive was added on this div. This is the first time we've looked at it, but as this component is entirely static we can tell Vue to not ...