Skip to content
This repository has been archived by the owner on Jul 26, 2022. It is now read-only.

teamnovu/vue-breaky-core

Repository files navigation

Warning This package is no longer supported.

vue-breaky-core

npm version License

Show Tailwind CSS Breakpoints in Vuejs

📖 Release Notes

Intro

DEMO

breaky helps you create your responsive designs faster. breaky reads your defined breakpoints within your tailwind config and shows the currently active breakpoint based on your browser window width.

Demo GIF of window resizing Demo GIF of dragging Demo GIF of toggling dark mode

Setup

NOTE: We highly recommend you to use one of the following packages:

These packages will help you install the breaky core.

If you only want to use the breaky core vue component and want to include it and the tailwind config yourself, feel free to do so but we won't guide your through the whole installation.

Just to get you started: Importing @teamnovu/vue-breaky-core imports the core component which you want to include on your page.

Configuration

Props

Prop Type Default Options Description
breakpoints Object none, Required The configured breakpoints (screens) as stored in the tailwind.config.js
colorScheme String auto 'auto' | 'light' | 'dark' Switch between different color schemes
position String 'bottomRight' 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' Breakys starting position

Development

  1. Clone this repository
  2. Install dependencies using yarn install
  3. Start development server using yarn dev

Release

  1. yarn release
  2. npm publish

License

MIT License

Copyright (c) teamnovu