Now that we've seen several options for starting a Vue project with Veed, let's dive into Veed's awesome features, starting with styling. Veed provides several different options for including our styles. As you'd expect, we can use a style tag in a single file component. Or we could also create an external style sheet and import it.
css file over in source slash assets. I'll just provide some crazy styling here so that we know things are working. How about the body with the background of blue? Now, for this to actually be included on the page, we now have a couple of different options for where to import it.
vue. And when I save, yeah, that works. And it works instantly without having to refresh the page. Nice.
How, though, is Vite actually injecting this? Well, if we go over and inspect the markup, you'll see that Vite has injected a style tag into the head section. Cool. That's one option.
Another option is to use an at import statement in the style section of the single file component. And, yeah, that works the same. Except now, the styles from the CSS file are included in the same style block as the other styles in the single file component. So, does this mean that if we make the styles scoped that the imported styles would be scoped too?
Well, let's give it a try. Cool. The styles are gone because the body tag does not exist within the scope of the app component. And if we inspect element, sure enough, the body selector has the randomly generated data attribute attached to it used for scoping styles.
That's pretty interesting. Let's go remove that scoped keyword now. It's worth mentioning that when you include styles into a single file component this way, the styles won't only ever be loaded when the component is loaded. For components loaded asynchronously, this means that the styles will also be asynchronous.
Another cool trick is to apply whole style sheets to only a certain media query. For instance, I could add maxWidth 800 pixels. to the end of this import statement. Then, over in the browser, the body background is still blue, but if I resize the page, you'll see that when it goes above 800 pixels, it becomes white.
Pretty cool. js. So let's move our import over there. This still works and is no longer limited by the media query.
Okay. css file to import them all? That's definitely possible too. css and in here I'll add some styles to the h1.
We'll give a color of let's say red and a font size 3 rim. Then to include the typography styles I'll add an import statement. css file. As soon as I save, you can see that the h1 now has our styles.
Best of all, this isn't like the add import statement in a regular old css file without v. There are no extra network requests made. css and typography are loaded at one time. To show you, let's open the network tab and refresh the page.
css. css file together in the same place. In production mode, these will be compiled to a single regular old CSS style sheet. Now that we've seen several options for starting a Vue project with Veed, let's dive into Veed's awesome features, starting with styling.
Veed provides several different options for including our styles. As you'd expect, we can use a style tag in a single file component. Or we could also create an external style sheet and import it. css file over in source slash assets.
I'll just provide some crazy styling here so that we know things are working. How about the body with the background of blue? Now, for this to actually be included on the page, we now have a couple of different options for where to import it. vue.
And when I save, yeah, that works. And it works instantly without having to refresh the page. Nice. How, though, is Vite actually injecting this?
Well, if we go over and inspect the markup, you'll see that Vite has injected a style tag into the head section. Cool. That's one option. Another option is to use an at import statement in the style section of the single file component.
And, yeah, that works the same. Except now, the styles from the CSS file are included in the same style block as the other styles in the single file component. So, does this mean that if we make the styles scoped that the imported styles would be scoped too? Well, let's give it a try.
Cool. The styles are gone because the body tag does not exist within the scope of the app component. And if we inspect element, sure enough, the body selector has the randomly generated data attribute attached to it used for scoping styles. That's pretty interesting.
Let's go remove that scoped keyword now. It's worth mentioning that when you include styles into a single file component this way, the styles won't only ever be loaded when the component is loaded. For components loaded asynchronously, this means that the styles will also be asynchronous. Another cool trick is to apply whole style sheets to only a certain media query.
For instance, I could add maxWidth 800 pixels. to the end of this import statement. Then, over in the browser, the body background is still blue, but if I resize the page, you'll see that when it goes above 800 pixels, it becomes white. Pretty cool.
js. So let's move our import over there. This still works and is no longer limited by the media query. Okay.
css file to import them all? That's definitely possible too. css and in here I'll add some styles to the h1. We'll give a color of let's say red and a font size 3 rim.
Then to include the typography styles I'll add an import statement. css file. As soon as I save, you can see that the h1 now has our styles. Best of all, this isn't like the add import statement in a regular old css file without v.
There are no extra network requests made. css and typography are loaded at one time. To show you, let's open the network tab and refresh the page. css.
css file together in the same place. In production mode, these will be compiled to a single regular old CSS style sheet.