# nuxt-breaky

> Show Tailwind CSS Breakpoints in Nuxtjs

Latest version **1.1.2** (published 2020-03-22) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install nuxt-breaky
pnpm add nuxt-breaky
yarn add nuxt-breaky
bun add nuxt-breaky
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2020-03-22 |
| First published | 2020-03-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 23.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | buffalom, reallykit, strebl |

## Links

- npm: https://www.npmjs.com/package/nuxt-breaky
- Repository: https://github.com/teamnovu/nuxt-breaky
- Homepage: https://github.com/teamnovu/nuxt-breaky#readme
- Issues: https://github.com/teamnovu/nuxt-breaky/issues
- npm.io page: https://npm.io/package/nuxt-breaky

## Dependencies (5)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [node-sass](https://npm.io/package/node-sass.md) ^4.13.1
- [interactjs](https://npm.io/package/interactjs.md) ^1.9.7
- [sass-loader](https://npm.io/package/sass-loader.md) ^8.0.2
- [@nuxtjs/tailwindcss](https://npm.io/package/@nuxtjs/tailwindcss.md) ^1.4.0

## Recent versions

- 1.1.2 (latest) — 2020-03-22
- 1.1.1 — 2020-03-22
- 1.1.0 — 2020-03-22
- 1.0.0 — 2020-03-22
- 0.1.3 — 2020-03-22
- 0.1.2 — 2020-03-21
- 0.1.1 — 2020-03-21
- 0.1.0 — 2020-03-21

## README

# nuxt-breaky

[![npm version][npm-version-src]][npm-version-href]
[![License][license-src]][license-href]

<!-- [![npm downloads][npm-downloads-src]][npm-downloads-href] -->
<!-- [![Circle CI][circle-ci-src]][circle-ci-href] -->
<!-- [![Codecov][codecov-src]][codecov-href] -->

> Show Tailwind CSS Breakpoints in Nuxtjs

<!-- [📖 **Release Notes**](./CHANGELOG.md) -->

## Intro

[DEMO](https://teamnovu.github.io/nuxt-breaky/)

breaky helps you to develop your responsive designs faster. It reads your defined breakpoints within your Tailwind Config and shows the current active breakpoint based on your browser window width.

The plugin will only be loaded during development mode and does not influence your production build.

![Demo GIF of window resizing](./example/assets/img/resizing.gif 'Resizing Browser Window')
![Demo GIF of dragging](./example/assets/img/dragging.gif 'Dragging Card to Corners')
![Demo GIF of toggling dark mode](./example/assets/img/toggle-dark-mode.gif 'Toggling between Dark and Light Mode')

## Setup

1. Add `nuxt-breaky` as a dev-dependency to your project

```bash
yarn add --dev nuxt-breaky # or npm install --save-dev nuxt-breaky
```

2. Add `nuxt-breaky` to the `buildModules` section of `nuxt.config.js`

> Use the `modules` section if you are using Nuxt older than `v2.9`. [More Info](https://nuxtjs.org/guide/modules/#build-only-modules)

```js
{
  buildModules: [
    // Simple usage
    'nuxt-breaky',

    // With options
    [
      'nuxt-breaky',
      {
        enabled: true,
        enableInProd: false,
        colorScheme: 'auto',
        position: 'bottomRight'
      }
    ]
  ]
}
```

3. Add `exposeConfig: true` to the `tailwindcss` section of `nuxt.config.js`

```js
{
  tailwindcss: {
    exposeConfig: true
  }
}
```

## Usage

The breaky module automatically adds the breaky plugin when in `development` mode.
No need to register or include it anywhere else.

### Configuration

You can pass options to the breaky using both the module options and the Nuxt config way.

```js
{
  buildModules: {
    ['nuxt-breaky', { /* module options */ }]
  },

  breaky: {
    /* module options */
  }
}
```

#### Available Options

| Option         | Type      | Default         | Options                                                          | Description                                                |
| -------------- | --------- | --------------- | ---------------------------------------------------------------- | ---------------------------------------------------------- |
| `enabled`      | `Boolean` | `true`          | `true` \| `false`                                                | Enable/Disable breaky                                      |
| `enableInProd` | `Boolean` | `false`         | `true` \| `false`                                                | Enable breaky in production (overrides the enabled option) |
| `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:patch` (`minor` or `major`)
2. `npm publish`

## License

[MIT License](./LICENSE)

Copyright (c) teamnovu

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/nuxt-breaky/latest.svg?style=flat-square
[npm-version-href]: https://github.com/teamnovu/nuxt-breaky/releases
[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-breaky.svg?style=flat-square
[npm-downloads-href]: https://github.com/teamnovu/nuxt-breaky/releases
[circle-ci-src]: https://img.shields.io/circleci/project/github/teamnovu/nuxt-breaky.svg?style=flat-square
[circle-ci-href]: https://circleci.com/gh/teamnovu/nuxt-breaky
[codecov-src]: https://img.shields.io/codecov/c/github/teamnovu/nuxt-breaky.svg?style=flat-square
[codecov-href]: https://codecov.io/gh/teamnovu/nuxt-breaky
[license-src]: https://img.shields.io/npm/l/nuxt-breaky.svg?style=flat-square
[license-href]: https://github.com/teamnovu/nuxt-breaky/blob/master/LICENSE

---
_Source: https://npm.io/package/nuxt-breaky · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._