@teamnovu/vue-breaky-core

Core Package for Breaky Plugins

0.1.4
latest
Source
npm

Version published: 4 years ago

Maintainers: 3

Created: 5 years ago

Source

vue-breaky-core

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:

Nuxtjs: nuxt-breaky
Vuejs: vue-breaky

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

Clone this repository
Install dependencies using yarn install
Start development server using yarn dev

Release

yarn release
npm publish

License

MIT License

FAQs

What is @teamnovu/vue-breaky-core?

Is @teamnovu/vue-breaky-core well maintained?

Package last updated on 03 Oct 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install