Single File Components

The way that we have organized the app, with individual components having a single feature to fulfill is referred to as the Single File Components (SFC) philosophy.

This approach is designed to enhance code readability, maintenance, and reusability. With SFC, you can create reusable and modular components that can be easily shared and reused across different projects.

To be fair, we did cut some corners with the TodoList.vue component, since we could have abstracted the getting and setting of the listItems to a different component. For the sake of this example, however, it illustrates the capabilities in an acceptable way. There are no strict rules or guidelines for how you structure your components.

Note that you can structure or restructure the contents of the script block in a way that makes sense to you. You have the freedom to group related sets together, which makes for very readable code that’s easy to refactor.