A simple Vue 3 composable that provides reactive breakpoints for Tailwind, Bootstrap, or custom configurations. Easily determine the current viewport size and its relation to your breakpoints with auto-completion in TypeScript.
- Responsive breakpoints based on Tailwind or Bootstrap.
- Pass custom breakpoints.
- Adjustable debounce delay for resize events.
- Auto-completion with TypeScript support.
The composable is written in TypeScript and provides full type support, including for custom breakpoints. You’ll get type safety and autocompletion when accessing the returned breakpoint properties.
First, install the package via npm:
npm install vue3-responsive-breakpoints
Since Vue is a peer dependency, ensure it's installed in your project:
npm install vue
Import the useBreakpoints composable and set up your breakpoints configuration.
<script setup>
import { useBreakpoints } from 'vue3-responsive-breakpoints';
const breakpoints = useBreakpoints();
</script>
<script setup>
import { useBreakpoints } from 'vue3-responsive-breakpoints';
const breakpoints = useBreakpoints();
</script>
<template>
<p v-if="breakpoints.sm">This is an example</p>
</template>
<script setup>
import { useBreakpoints } from 'vue3-responsive-breakpoints';
const breakpoints = useBreakpoints();
function ExampleFunction() {
return breakpoints.smDown ? "Screen width is small or below" : "Screen is above small"
}
</script>
This approach is beneficial as it allows us to initialize the composable just once, minimizing the number of event listeners.
//Pinia file store
import { useBreakpoints } from 'vue3-responsive-breakpoints';
import { defineStore } from 'pinia';
export const useGeneralStore = defineStore('general', () => {
//Since the composable is already reactive, there's no need to store the breakpoints in a ref.
const breakpoints = useBreakpoints();
//Other store shenanigans
return {
breakpoints
};
});
<script setup>
import { useGeneralStore } from 'store directory'
// If the breakpoints was not assigned to a ref, DO NO USE storeToRefs
const { breakpoints } = useGeneralStore();
</script>
<template>
<p v-if="breakpoints.sm">This is an example</p>
</template>
-
xs,sm,md,lg,xl,xxl: Check if the viewport is within a specific breakpoint range. -
xsUp,smUp,mdUp,lgUp,xlUp,xxlUp: Check if the viewport is at or above a specific breakpoint. -
xsDown,smDown,mdDown,lgDown,xlDown,xxlDown: Check if the viewport is below a specific breakpoint.
| Params | Default | Value |
|---|---|---|
| Preset (optional) | Default 'tailwind'
|
'tailwind', 'bootstrap', custom object: { sm: number, md: number, lg: number, xl: number, xxl: number}
|
| debounceDelay (Optional) | 250ms | Number |
MIT License