How can I use media queries in Vue.js?

How can I use media queries in Vue.js?

You can use media queries in Vue.js by applying them in your CSS files or using inline styles with Vue's reactive properties.

Can you show me an example of using media queries in a Vue component?

Sure! Here's a simple example:

<template>
  <div class="responsive-box">
    <p>This box changes size based on the viewport.</p>
  </div>
</template>

<style scoped>
.responsive-box {
  width: 100%;
  height: 200px;
  background-color: lightblue;
}

@media (max-width: 600px) {
  .responsive-box {
    background-color: lightcoral;
  }
}
</style>

What if I want to use CSS modules with media queries?

You can still use media queries with CSS modules. Just define your styles in a module file and include media queries as you normally would.

Are there any libraries that can help with responsive design in Vue?

Yes, libraries like Vuetify and BootstrapVue provide built-in responsive design features that work well with Vue.