nuxt-viewport - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

CHANGELOG.md

@@ -5,2 +5,4 @@ # Changelog
 
+### [0.0.4](https://github.com/mvrlin/nuxt-viewport/compare/v0.0.3...v0.0.4) (2021-03-03)
+
 ### [0.0.3](https://github.com/mvrlin/nuxt-viewport/compare/v0.0.2...v0.0.3) (2021-02-27)
@@ -7,0 +9,0 @@

package.json

 {
   "name": "nuxt-viewport",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Define custom viewports for your Nuxt project",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -57,25 +57,89 @@ # nuxt-viewport
 
+
+## Usage with `@nuxtjs/composition-api`
+```js
+import { defineComponent, watch } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  setup(_, { root }) {
+    // Viewport module.
+    const viewport = root.$viewport
+
+    // Watch breakpoint for updates.
+    watch(() => viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
+      console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
+    })
+  },
+})
+```
+
+## Typescript
+If using typescript or running typescript language server to check the code (for example through Vetur), add types to `types` array in your `tsconfig.json`:
+```json
+{
+  "compilerOptions": {
+    "types": [
+      "@nuxt/types",
+      "nuxt-viewport",
+    ]
+  }
+}
+```
+
 ## Configuration
 
-```ts
+### `breakpoints`
+
+- Type: Object
+
+An object where the key is the name of the viewport, and the value is the viewport size.
+
+### `cookieName`
+
+- Type: String
+- Default: `viewport`
+
+The key for the document cookie.
+
+### `defaultBreakpoints`
+
+- Type: Object
+- Detectable devices: `console`, `desktop`, `embedded`, `mobile`, `smarttv`, `tablet`, `wearable`
+
+An object where the key is the name of the detected device, and the value is the breakpoint key.
+
+### `fallbackBreakpoint`
+
+- Type: String
+- Default: `viewport`
+
+The breakpoint key to be used, if the device was not detected.
+
+## Default configuration
+
+```js
 {
   // ...
   viewport: {
-    // Define your own breakpoints.
     breakpoints: {
-      [key: string]: number
+      desktop: 1024,
+      desktopMedium: 1280,
+      desktopWide: 1600,
+
+      mobile: 320,
+      mobileMedium: 375,
+      mobileWide: 425,
+
+      tablet: 768,
     },
 
-    // Cookie name.
-    // Default: "viewport".
-    cookieName: string
+    cookieName: 'viewport',
 
-    // Default breakpoints based on device type for auto detection.
-    // Available devices: "console", "desktop", "embedded", "mobile", "smarttv", "tablet", "wearable".
     defaultBreakpoints: {
-      [key: string]: string
+      desktop: 'desktop',
+      mobile: 'mobile',
+      tablet: 'tablet',
     },
 
-    // Breakpoint to fallback, if device was not detected.
-    fallbackBreakpoint: string
+    fallbackBreakpoint: 'desktop',
   },
@@ -86,3 +150,3 @@ // ...
 
-Example for TailwindCSS.
+## Example configuration for Tailwind CSS
 ```js
@@ -113,59 +177,45 @@ {
 
-## Default configuration
+## API
 
-```js
-{
-  // ...
-  viewport: {
-    breakpoints: {
-      desktop: 1024,
-      desktopMedium: 1280,
-      desktopWide: 1600,
+### `$viewport.breakpoint`
+- Type: String
 
-      mobile: 320,
-      mobileMedium: 375,
-      mobileWide: 425,
+Current breakpoint.
 
-      tablet: 768,
-    },
+### `$viewport.isGreaterThan`
+- Type: Boolean
 
-    cookieName: 'viewport',
+```js
+// Example: $viewport.breakpoint is "mobile".
+// Result: false.
+$viewport.isGreaterThan('desktop')
+```
 
-    defaultBreakpoints: {
-      desktop: 'desktop',
-      mobile: 'mobile',
-      tablet: 'tablet',
-    },
+### `$viewport.isLessThan`
+- Type: Boolean
 
-    fallbackBreakpoint: 'desktop',
-  },
-  // ...
-}
+```js
+// Example: $viewport.breakpoint is "desktop".
+// Result: true.
+$viewport.isLessThan('desktopWide')
 ```
 
-## Typescript
-If using typescript or running typescript language server to check the code (for example through Vetur), add types to `types` array in your `tsconfig.json`:
-```json
-{
-  "compilerOptions": {
-    "types": [
-      "@nuxt/types",
-      "nuxt-viewport",
-    ]
-  }
-}
+### `$viewport.match`
+- Type: Boolean
+
+```js
+// Example: $viewport.breakpoint is "tablet".
+// Result: true.
+$viewport.match('tablet')
 ```
 
-## API
+### `$viewport.matches`
+- Type: Boolean
 
-- `$viewport.breakpoint` - Current breakpoint.
+```js
+// Example: $viewport.breakpoint is "mobileWide".
+// Result: true.
+$viewport.match('tablet', 'mobileWide')
+```
 
-- `$viewport.isGreaterThan(searchBreakpoint)` - Returns true, if searchBreakpoint is greater, than the current breakpoint.
-
-- `$viewport.isLessThan(searchBreakpoint)` - Returns true, if searchBreakpoint is less, than the current breakpoint.
-
-- `$viewport.match(breakpointToMatch)` - Returns true if current breakpoint is matching the value.
-
-- `$viewport.matches(breakpointsToMatch)` - Returns true if current breakpoint is included in the values.
-
 ## Contributing
@@ -172,0 +222,0 @@

No alert changes

Improved metrics

Total package byte prevSize

16268

increased by4.93%

Number of lines in readme file

251

increased by24.88%

No dependency changes