This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Vue Snippets" Lesson
[00:00:00]
>> Sarah Drasner: Okay, so let's' go over this Vue file extension for a moment because if you haven't worked with view, you won't have come across it before. I used a bunch of snippets when we were doing that last Vue CLI build, because I think that they help me be really productive.
[00:00:16] I have one for Sublime. There's one for Atom. I think that that's version 1.x. I'm not sure if they've upgraded yet, so just a warning there. There's one for vscode. There's also a thing called Vetur for vscode, which will probably end up making me switch code editors. There's a person who loves view over on the vscode team.
[00:00:36] And he's made this beautiful suite that's very, very feature rich. So definitely check that out. And there's a link to that there. So we looked at this file really, really quickly, but I kind of glossed over these style scoped area. What that style scoped tag will let us do is write styles only for that component.
[00:01:02] So if you've worked with CSS modules before, this will sounds familiar to you. If I write style scoped in that area, even if I used that class selector somewhere else in the application, it's going to be scoped only to that Vue file, which actually helps me keep everything tight and organized, especially if you have just the one off thing.
[00:01:26] That happens pretty often. You have a bunch of global styles that you need for everything. You need to use a certain font. You need to use a certain line height. And then when you're using that style scoped tag you're gonna have a few, okay, just this element needs this weird amount of padding.
[00:01:43] That is really, really useful there. It's really, really great for a slots too. So we're gonna dig into that in just a second. So to @import styles, if you've used Sass before, if you wanted to do @import and put in your assets folder, a main.css file, you'd have to run a NPM installer, style loader, and then you could do so.
[00:02:11] We're not gonna do that today, but that's basically how you would create that import. So, we had kind of talked about this black label, white label, and we have these slots, and things like that. And how we can have different things based on, we're basically styling these based on that component and just putting everything else inside of a slot in order to style it.
[00:02:35] And when we were working with CodePen what we had to do was this crazy thing where we had to go and say div class black, .black .label, .black .bottle, .black .wine-text, .black .flor, .black .bking. And that's fine. It works, but it's also not very elegant. So what we can end up doing when we move to the CLI in that style scoped tag is in that, inside that component itself I'm using style scoped and I'm just saying label, bottle, all of these things.
[00:03:12] And it's gonna make sure that in my black component I have all of those things available to us. So if you want to actually check out the real build of this, I have the CodePen build, and then I have a repo full of the actual build. So we could go into the src folder here, go into components.
[00:03:31] And then you could see there's that template with the slot inside, and the style scoped tag, and we have a bunch of styles that will only work. And that's a really kind of nice use for switching out a bunch of stuff. If you have client that has a bunch of different templates and you need to style a bunch of different things, you could actually probably wrap that in a component that uses a slot and use a style scoped tag