How can I use media queries in Vue 3?

How can I use media queries in Vue 3?

You can use media queries in Vue 3 by applying them in your CSS files or using the v-bind:style directive for inline styles.

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

Sure! Here's a simple example:

<template>
  <div :class="{'mobile': isMobile}">
    <p>Hello, Vue 3!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMobile: false
    };
  },
  mounted() {
    this.checkViewport();
    window.addEventListener('resize', this.checkViewport);
  },
  methods: {
    checkViewport() {
      this.isMobile = window.innerWidth < 768;
    }
  }
};
</script>

<style>
.mobile {
  background-color: lightblue;
}
@media (min-width: 768px) {
  .mobile {
    background-color: white;
  }
}
</style>

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

You can still use media queries with CSS modules in Vue 3. Just define your media queries within the module's CSS file, and import the styles in your component.