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. VueUse has support for both Nuxt 2 and Nuxt 3 projects. Thanks for all the support! ✌️

📖 Release Notes

Features

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

1{
2  modules: [
3    // Simple usage
4    [
5      'nuxt-mq',
6      {
7        // Default breakpoint for SSR
8        defaultBreakpoint: 'sm',
9        breakpoints: {
10          sm: 450,
11          md: 1250,
12          lg: Infinity
13        }
14      }
15    ]
16  ];
17}

using top level options

1{
2  modules: [
3    ['nuxt-mq']
4  ],
5
6 'mq': {
7    defaultBreakpoint: 'sm',
8    breakpoints: {
9      sm: 450,
10      md: 1250,
11      lg: Infinity,
12    }
13  }
14}

Usage

Click here for all options and features of 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

Copyright (c) Maarten Van Hoof

Credits

1. vue-mq for providing the plugin.
2. @nuxtjs for providing a excellent example on how to build a basic Nuxt.js module.