nuxt-mq

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

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

using top level options

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

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

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

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