How can I create responsive layouts in Vue.js?

How can I create responsive layouts in Vue.js?

You can use CSS Flexbox or Grid along with Vue's reactive properties to create responsive layouts. Would you like an example?

Yes, please provide an example using Flexbox.

Sure! You can create a responsive card layout like this:

<template>
  <div class="container">
    <div class="card" v-for="item in items" :key="item.id">
      <h3>{{ item.title }}</h3>
      <p>{{ item.description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, title: 'Card 1', description: 'Description 1' },
        { id: 2, title: 'Card 2', description: 'Description 2' },
      ]
    };
  }
};
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}
.card {
  flex: 1 1 300px;
  margin: 10px;
  padding: 20px;
  border: 1px solid #ccc;
}
</style>

How does the flex: 1 1 300px; work in this example?

The flex: 1 1 300px; means:

• 1: the item can grow to fill available space.
• 1: the item can shrink if needed.
• 300px: the base size of the item is 300 pixels.