Vue.js 2 Web Development Projects

Defining and using the components

We will write our UI components in a new file:

1. Create a components folder and a new ui.js file inside it. Include it in the main index.html page, just before the main script:

      <!-- Scripts -->      <script src="utils.js"></script>      <script src="cards.js"></script>      <script src="state.js"></script>      <script src="components/ui.js"></script>      <script src="main.js"></script>

In this file, we will register our components, so it's important that the main Vue instance is created afterward, and not before. Else, we would get errors of components not being found.

To register a component, we can use the global Vue.component() function. It takes two arguments; the name under which we register the component, and its definition ...