What are some examples of responsive design using Vue.js?

What are some examples of responsive design using Vue.js?

There are several great examples of responsive design using Vue.js. For instance, you can create a responsive navigation bar that adjusts based on screen size.

Can you show me a code snippet for a responsive navbar?

Sure! Here's a simple example:

<template>
  <nav class="navbar">
    <div class="logo">MyApp</div>
    <ul :class="{'active': isActive}">
      <li v-for="item in menuItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, name: 'Home' },
        { id: 2, name: 'About' },
        { id: 3, name: 'Contact' }
      ],
      isActive: false
    };
  }
};
</script>

<style>
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}

ul {
  list-style: none;
  display: flex;
}

@media (max-width: 600px) {
  ul {
    flex-direction: column;
  }
}
</style>

What other components can I make responsive with Vue.js?

You can make various components responsive, such as cards, grids, and forms. Using CSS frameworks like Bootstrap or Tailwind CSS with Vue.js can also enhance responsiveness.