As we stated in the previous chapter, Vue components are an optional part of the Nuxt view. You've already learned about various constituents of the Nuxt view: app template, HTML head, layout, and page. However, we haven't covered the smallest unit in Nuxt - the Vue component. So, in this chapter, you will learn how it works and how to make use of /components/ for creating custom components. You will then learn how to create global and local components, as well as basic and global mixins, and get to know some of the naming conventions for developing Vue or Nuxt apps. Most excitingly, you will discover how to pass data down from a parent component to a child component, as well as emit data up to the parent from the child.
In this chapter, we will cover the following topics:
- Understanding Vue components
- Creating single-file Vue components