Vue Component Media Queries

Overview

The Vue Component Media Queries is a lightweight and user-friendly component library for Vue that allows you to define responsive breakpoints via media queries and use them in your components. It provides an integration with window.matchMedia for Vue, ensuring zero hydration errors and compatibility with server-side rendering. The library is clean and tree-shakeable, allowing you to import only the necessary components where needed.

Features

• Lightweight: Less than 1kb gzipped total size.
• User-friendly: No global installation required, can be used on a per-component level.
• Versatile: Works both on a component level (inside <template>) or as an injected property (inside <script>).
• Server Rendered: Zero hydration errors, compatible with Nuxt.js or custom SSR, supports predictive rendering.
• Tree-shakeable: Import only the necessary components right where you need them.
• Clean: Does not pollute your component’s context.

Installation

To install the Vue Component Media Queries library, you can use either NPM or a CDN.

NPM

Install the library as a dependency:

npm i vue-component-media-queries

Import the components via named exports where necessary in your project:

import { MediaQueryProvider, MatchMedia } from 'vue-component-media-queries';

CDN

If you don’t have the option to use NPM, you can use a CDN package. However, this method is not recommended for production usage. Prefer using the NPM method whenever possible.

Import the library after Vue from the CDN and get components from the global VueComponentMediaQueries object:

<script src="https://cdn.jsdelivr.net/npm/vue-component-media-queries@1.0.0/dist/vue-component-media-queries.min.js"></script>

<script>
  const { MediaQueryProvider, MatchMedia } = VueComponentMediaQueries;
</script>

Summary

The Vue Component Media Queries library is a lightweight and user-friendly component library for Vue that allows you to define and use responsive breakpoints in your components. It provides easy integration with Vue, supports server-side rendering, and is clean and tree-shakeable. Whether you need to toggle element visibility or have logic bound to media queries, this library offers a simple and efficient solution.