# nuxt-mq

> vue-mq module for Nuxt.js

Latest version **3.0.0** (published 2022-11-04) · MIT license · 0 weekly downloads

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

## Install

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

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2022-11-04 |
| First published | 2018-06-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 4.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mrtnvh |
| Keywords | nuxt, nuxt.js, nuxtjs, vue, vue.js, vuejs, media queries |

## Links

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

## Dependencies (1)

- [vue-mq](https://npm.io/package/vue-mq.md) ^1.0.1

## Recent versions

- 3.0.0 (latest) — 2022-11-04
- 2.0.2 — 2020-11-23
- 2.0.1 — 2019-09-30
- 2.0.0 — 2019-03-22
- 1.1.3 — 2018-10-27
- 1.1.2 — 2018-10-13
- 1.0.5 — 2018-06-19
- 1.0.4 — 2018-06-18
- 1.0.3 — 2018-06-18
- 1.0.1 — 2018-06-18
- 1.0.0 — 2018-06-18

## README

# nuxt-mq


> **Deprecated**
> nuxt-mq is deprecated. If you wan't to create Vue logic based on the screen size, I recommend using a solution that uses hooks instead. Personally, I would recommend [VueUse useMediqQuery hook](https://vueuse.org/core/usemediaquery). VueUse has support for both Nuxt 2 and Nuxt 3 projects. Thanks for all the support! ✌️



[📖 **Release Notes**](./CHANGELOG.md)

## Features

[vue-mq](https://github.com/AlexandreBonaventure/vue-mq) module for Nuxt.js.

## Setup

- Add `nuxt-mq` dependency using yarn or npm to your project
- Add `nuxt-mq` to `modules` section of `nuxt.config.js`

```js
{
  modules: [
    // Simple usage
    [
      'nuxt-mq',
      {
        // Default breakpoint for SSR
        defaultBreakpoint: 'sm',
        breakpoints: {
          sm: 450,
          md: 1250,
          lg: Infinity
        }
      }
    ]
  ];
}
```

using top level options

```js
{
  modules: [
    ['nuxt-mq']
  ],

 'mq': {
    defaultBreakpoint: 'sm',
    breakpoints: {
      sm: 450,
      md: 1250,
      lg: Infinity,
    }
  }
}
```

## Usage

[Click here](https://github.com/AlexandreBonaventure/vue-mq) for all options and features of [vue-mq](https://github.com/AlexandreBonaventure/vue-mq).

## Development

- Clone this repository
- Install dependencies using `yarn install` or `npm install`
- Start development server using `npm run dev` or with Node debugging on `npm run dev-debug`

## License

[MIT License](./LICENSE)

Copyright (c) [Maarten Van Hoof](https://mrtnvh.com)

## Credits

1. [vue-mq](https://github.com/AlexandreBonaventure/vue-mq) for providing the plugin.
2. [@nuxtjs](https://github.com/nuxt-community/analytics-module) for providing a excellent example on how to build a basic Nuxt.js module.

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