Creating Vue components

Now we're confident our code is cleaner, we can move on to making Vue components for the various parts of our app. Put aside your code for now and open a new document while you get to grips with components.

Vue components are extremely powerful and a great addition to any Vue app. They allow you to make packages of reusable code that include their own data, methods, and computed values.

For our app, we have the opportunity to create two components: one for each person and one for the filtering section of our app. I would encourage you to always look at breaking your app into components where possible—this helps group your code into related functions.

Components look like mini Vue instances as each one has its own data, methods, and computed objects—along with some component-specific options that we will cover shortly. Components are also extremely useful when it comes to creating an app with different pages and sections—this will be covered in Chapter 8, Introducing Vue-Router and Loading URL-Based Components. 

When a component is registered, you create a custom HTML element to use in your view, for example:

      <my-component></my-component>

When naming your component, you can use kebab-case (hyphens), PascalCase (no punctuation, but each word is capitalized) or camelCase (similar to Pascal but the first word is not capitalized). Vue components are not restricted by, or associated with, the W3C web components/custom element rules, but it is good practice to follow this convention of using kebab-case.