Responsive breakpoints customization

To customize the breakpoints, you can define a breakpoints object in your vbox.config.ts or vbox.config.js file. You can then specify your desired breakpoint values for different screen sizes ranging from sm to xl.

// vbox.config.ts
import { defineConfig } from '@veebox/core';

export default defineConfig({
  breakpoints: {
    sm: '35rem',
    md: '45rem',
    lg: '60rem',
    xl: '75rem',
  },
});

Now you can use these custom breakpoints in your v-box components for responsive styling.

<v-box
  :sm="{ backgroundColor: 'lightblue' }"
  :lg="{ backgroundColor: 'lightcoral' }"
>
  Responsive Box
</v-box>

This div will change its background color based on the screen size according to the custom breakpoints defined in your configuration.