Jump Start Vue.js, 2nd Edition

Chapter 3: Components

As we briefly touched on in Chapter 1, Vue was designed for creating component-based UIs. The idea is that you can structure your application around self-contained, reusable elements that represent a discrete part of the interface.

One example of this might be an avatar component that displays a user’s profile picture as a circular image. Once created, this component can be dropped into your application code anywhere you want to display the user’s avatar:

<div class="sidebar">
  <avatar :src="user.image" />
  <h2>{{ user.nick }}</h2>
</div>

As you can see in the above example, using a Vue component in your templates is like having a new HTML element available: you use the component’s name as the tag (<avatar>, in this case) ...