{"id":13833384,"url":"https://github.com/teamnovu/nuxt-breaky","last_synced_at":"2025-10-07T01:31:23.157Z","repository":{"id":38740457,"uuid":"248882963","full_name":"teamnovu/nuxt-breaky","owner":"teamnovu","description":"Display your Tailwind CSS Breakpoints within Nuxtjs during Development","archived":true,"fork":false,"pushed_at":"2022-07-26T12:34:57.000Z","size":15419,"stargazers_count":130,"open_issues_count":28,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-04T12:01:13.848Z","etag":null,"topics":["hacktoberfest","nuxtjs","nuxtjs-module","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/teamnovu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-21T01:08:55.000Z","updated_at":"2024-04-04T19:43:30.000Z","dependencies_parsed_at":"2022-09-13T03:10:26.956Z","dependency_job_id":null,"html_url":"https://github.com/teamnovu/nuxt-breaky","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamnovu%2Fnuxt-breaky","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamnovu%2Fnuxt-breaky/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamnovu%2Fnuxt-breaky/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamnovu%2Fnuxt-breaky/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/teamnovu","download_url":"https://codeload.github.com/teamnovu/nuxt-breaky/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219877423,"owners_count":16554878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","nuxtjs","nuxtjs-module","tailwindcss"],"created_at":"2024-08-04T12:00:31.428Z","updated_at":"2025-10-07T01:31:17.168Z","avatar_url":"https://github.com/teamnovu.png","language":"JavaScript","funding_links":[],"categories":["Vuejs/Nuxtjs Plugins","JavaScript"],"sub_categories":[],"readme":"\u003e **Warning**\n\u003e This package is no longer supported.\n\n# nuxt-breaky\n\n[![npm version][npm-version-src]][npm-version-href]\n[![License][license-src]][license-href]\n\n\u003c!-- [![npm downloads][npm-downloads-src]][npm-downloads-href] --\u003e\n\u003c!-- [![Circle CI][circle-ci-src]][circle-ci-href] --\u003e\n\u003c!-- [![Codecov][codecov-src]][codecov-href] --\u003e\n\n\u003e Show Tailwind CSS Breakpoints in Nuxtjs when using the [tailwindcss-module](https://github.com/nuxt-community/tailwindcss-module)\n\n[📖 **Release Notes**](./CHANGELOG.md)\n\n## Intro\n\n[DEMO](https://teamnovu.github.io/nuxt-breaky/)\n\nbreaky helps you create your responsive designs faster. It extends the awesome [tailwindcss-module](https://github.com/nuxt-community/tailwindcss-module). breaky reads your defined breakpoints within your tailwind config and shows the currently active breakpoint based on your browser window width.\n\nThe plugin will only be loaded during development mode and does not interfere with your production build.\n\n![Demo GIF of window resizing](./example/assets/img/resizing.gif 'Resizing Browser Window')\n![Demo GIF of dragging](./example/assets/img/dragging.gif 'Dragging Card to Corners')\n![Demo GIF of toggling dark mode](./example/assets/img/toggle-dark-mode.gif 'Toggling between Dark and Light Mode')\n\n## Requirements\n\nMake sure `tailwindcss-module: ^1.4.0` (or higher) is installed.\n\n## Setup\n\n1. Add `@teamnovu/nuxt-breaky` as a dev-dependency to your project\n\n```bash\nyarn add @teamnovu/nuxt-breaky --dev\n\n# or npm install @teamnovu/nuxt-breaky --save-dev\n```\n\n2. Add `@teamnovu/nuxt-breaky` to the `buildModules` section of `nuxt.config.js`\n\nNOTE: Use the `modules` section if you are using Nuxt older than `v2.9`. [More Info](https://nuxtjs.org/guide/modules/#build-only-modules)\n\n```js\n{\n  buildModules: [\n    // Simple usage\n    '@teamnovu/nuxt-breaky',\n\n    // With options\n    [\n      '@teamnovu/nuxt-breaky',\n      {\n        enabled: true,\n        enableInProd: false,\n        colorScheme: 'auto',\n        position: 'bottomRight'\n      }\n    ]\n  ]\n}\n```\n\n3. Add `exposeConfig: true` to the `tailwindcss` section of `nuxt.config.js`\n\n```js\n{\n  tailwindcss: {\n    exposeConfig: true\n  }\n}\n```\n\nNOTE: Please be aware this adds ~19.5KB (~3.5KB) to the client bundle size when you are in development mode. [More Info](https://github.com/nuxt-community/tailwindcss-module#referencing-in-javascript)\n\n## Usage\n\nThe breaky module automatically adds the breaky plugin when in `development` mode.\nNo need to register or include it anywhere else.\n\n### Configuration\n\nYou can pass options to the breaky using both the module options and the Nuxt config way.\n\n```js\n{\n  buildModules: {\n    ['@teamnovu/nuxt-breaky', { /* module options */ }]\n  },\n\n  breaky: {\n    /* module options */\n  }\n}\n```\n\n#### Available Options\n\n| Option         | Type      | Default         | Options                                                          | Description                                                                                                                                                                                                                   |\n| -------------- | --------- | --------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `enabled`      | `Boolean` | `true`          | `true` \\| `false`                                                | Enable/Disable breaky                                                                                                                                                                                                         |\n| `enableInProd` | `Boolean` | `false`         | `true` \\| `false`                                                | Enable breaky in production (overrides the enabled option; Please be aware this adds ~19.5KB (~3.5KB) to the client bundle size. [More Info](https://github.com/nuxt-community/tailwindcss-module#referencing-in-javascript)) |\n| `colorScheme`  | `String`  | `auto`          | `'auto'` \\| `'light'` \\| `'dark'`                                | Switch between different color schemes                                                                                                                                                                                        |\n| `position`     | `String`  | `'bottomRight'` | `'topLeft'` \\| `'topRight'` \\| `'bottomLeft'` \\| `'bottomRight'` | Breakys starting position                                                                                                                                                                                                     |\n\n## Development\n\n1. Clone this repository\n2. Install dependencies using `yarn install`\n3. Start development server using `yarn dev`\n\n### Release\n\n1. `yarn release`\n2. `npm publish`\n\n## License\n\n[MIT License](./LICENSE)\n\nCopyright (c) teamnovu\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-breaky/latest.svg?style=flat-square\n[npm-version-href]: https://www.npmjs.com/package/@teamnovu/nuxt-breaky\n[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-breaky.svg?style=flat-square\n[npm-downloads-href]: https://github.com/teamnovu/nuxt-breaky/releases\n[circle-ci-src]: https://img.shields.io/circleci/project/github/teamnovu/nuxt-breaky.svg?style=flat-square\n[circle-ci-href]: https://circleci.com/gh/teamnovu/nuxt-breaky\n[codecov-src]: https://img.shields.io/codecov/c/github/teamnovu/nuxt-breaky.svg?style=flat-square\n[codecov-href]: https://codecov.io/gh/teamnovu/nuxt-breaky\n[license-src]: https://img.shields.io/npm/l/nuxt-breaky.svg?style=flat-square\n[license-href]: https://github.com/teamnovu/nuxt-breaky/blob/master/LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteamnovu%2Fnuxt-breaky","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteamnovu%2Fnuxt-breaky","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteamnovu%2Fnuxt-breaky/lists"}