Why I Love CSS Modules in Vue.js

=======================================
📚 Resources
=======================================

=======================================
📑 Bookmarks
=======================================

00:00:00:00 - Intro
00:04:40:16 - Live Coding with CSS Modules
00:10:41:03 - CSS Modules in Composition API
00:13:34:14 - Outro

=======================================
📱 Social Media
=======================================

=======================================
🏷 Keywords
=======================================
vue js styles css-in-js

[maskman]

This is an aswesome feature, I will defintely try css modules, for people who are not familiar how it works it might look intimidating but with your step by step instructions and walk through it makes sense and looks fun to work with it !!!

[DedicatedManagers]

Why doesn’t scoped styles just do the append thing rather than the data attribute?

[DannyFeliz]

Can you talk about the new <script setup> component syntax released in Vue 3.0.3?

[vuetamil]

Thanks for the clear explanation. Are you aware of any vue-cli/webpack plugin that I can use to auto-convert all SFC scoped styles to module variant in a large code base? As far as I can see, it's basically changing "scoped" to "module" in the style tag, and in the template, change the reference to classes to an array with referring them with the $style prefix? Is it as simple as this or, there are more between scoped vs module that I'm missing? Thanks again!

[bilich]

hi, i i like the way you make videos and how explain things so straight and clear,
but i have a question in this video, can i mix module css and plain css class?
somethink like this
:class="[$style.header, headerMain]" being "headerMain" normal class of css
i try it, but think i cant :C

[cswalker]

Thank you. Great explanation. I didn't know you had your own channel; I know you from Vue Mastery +1 subscriber!

[mikeeomega]

Thank you!!! BTW I like the format of this video :)

[DedicatedManagers]

Great video! What app do you use to present your code changes so that the pieces of code slide around when they change?

[shamscorner]

It is really a great opportunity to learn Vue.js from the Vue Core Team Member. Super helpful! By the way, can you make a video on the latest version of Vuex and Vue-router? Thanks.

[ilooi]

Beautiful. Now try to achieve something similar in React.
God, I hate React hype.

[AlfredAyache]

Thanks for a terrific explanation, Ben. How would you handle snapshots in unit tests? The problem being that the added hash is randomly generated, and will very probably be different from one unit test invocation to the next, so the snapshots will be different.

[coltzi]

why not just use scss and wrap everything in a custom name for that exact component? :)

[ALBUMSpomen]

Hi Ben. Thank you so so much for this tutorial on how to use CSS Modules in Vue JS. This looks pretty cool 👌. One question totally not related to CSS Modules, what is the shortcut in VS Code to wrap the text with square brackets [ ] form both sides. I saw you used it in this tutorial so I was thinking if you can share that tip it would be very helpful. Thank you once again for your great work and please keep going with this amazing tutorials. Cheers.

[robertotonino]

Great video! Just want to point one thing that I noticed: in your compiled CSS modules, you don't have the component name prefixed. Is this right?

[parasyusha]

Thank you for the video and explanation 😊

[redefamatv]

Could you add some Vue content about Vue-styled-components??

[AJmady]

Cool video. It's a pity the syntax is quite ugly compared to normal css classes

[goodhoor]

Tell me how to use css-modules in a separate file - test.module.sass .The example I gave doesn't work
<template>
<div :class="test.red">
<h1>Test</h1>
</div>
</template>

<script>
import test from '../test.module.sass'
export default {
data () {
return {
test
}
}
}
</script>


test.module.sass In a separate file
.red
color: red