Refactor to use Vue files
We'll look at how we can transfer our work so far into using single file components. We'll see how the build tools lint our code and allow us to have more readable code.
Instructor: [0:00] Let's see how to convert our TicketDetails.js to a TicketDetails.vue file. Remember that this is made up of a template, made up of a script, and it's made up of a style.
[0:28] The template, we can copy and paste from there. For our script, we're going to export default, and the first thing we do is we have a name. In this case, we had TicketDetails.
[0:50] Then we have our props, we can just bring those up from our definition before and then we can parse back our data and our methods like we had here. It's the same kind of configuration object that we have for everything else in Vue. In terms of styling, there's nothing specific we did. We can leave that blank or exclude it altogether.
[1:18] For our App.vue, we're going to replace the template with everything in between our body tags over here. Instead of importing the, Hello World, we want to import TicketDetails from TicketDetails.vue. Then we want to parse that component into our application.
[1:58] We also want them to set up our data here, instead of our main JS. Now, we can go into our ticket apps and we can run, npm run serve. Start development server, we'll build our files, and see we've forgotten to parse the key on our vue-details. Line seven. We get a URL to click on, which brings us to this version of our application which works as before.
No problem, glad you found it useful!
Nice and clean. Thank you Kevin!