2orerz024 Single Fle Components - Real World Vus 3 | Vue Mastery Single File Components Now that we've created our project with the Vue CLI, we're ready to start customizing it to build our own app. If you're coding along (which | encourage you to do) you'll want to checkout the L3-start branch of our project repo to grab the starting code (L3 stands for Lesson 3). In that code, | want to bring your attention to this file I've added: Eprettierrc.js module.exports = { singleQuote: true, semi: false Here, I've set up some rules so that Prettier will change any double quotes (" ) to single ones ( ‘ ) and remove any semicolons ( ; ). ’m not advocating for or against semicolons and double quotes. This is a simple example of how you might add some Prettier configuration rules to your project. We could do something similar for ESLint as well. For a more in-depth look at how you can configure ESLint + Prettier as well as get the most out of VS Code, you can check out this article. What are these .vue files? In order to start building our app, we need to get some foundational understanding of how things are working within the demo app the CLI created for us, including the views directory, which includes two Home.vue and About.vue single-file vue fi ‘These are the components that Vue Router loads up when we navigate to the Home and About routes, respectively. hitps www: vwemastery.comicoursestreal-warl-vueSsingle-le-components sn2orer2021 Single Fle Components - Real World Vus 3 | Vue Mastery BMA TNC icig AeA In the next lesson, we'll explore the essentials of Vue Router, but for now you just need to understand that these “view” components are the different views that can be seen (or navigated to) within our app. They can contain child components that are nested within them, and their children will be displayed in that view as well. For example, the Home.vue component has a child: HelloWorld.vue, which has a bunch of template code that is being displayed when we're on the Home route. Each of these .vue files are single file components, and that's what this lesson is exploring: How are single file components composed, and how do you use them to create a Vue app? Anatomy of a Single File Component When we're talking about Vue apps, we're really talking about a collection of Vue components. hitps dwn: vwemastery.comfcoursestrea-word-vueiinglefle-companents ane2orer2024 Single Fle Components - Real World Vus 3 | Vue Mastery ‘So what do these single file components look like under the hood? Atypical vue component has three sections: