{"id":13506572,"url":"https://github.com/nuxt-modules/device","last_synced_at":"2025-05-13T22:03:33.571Z","repository":{"id":37663989,"uuid":"113526794","full_name":"nuxt-modules/device","owner":"nuxt-modules","description":"Nuxt module for detecting device type.","archived":false,"fork":false,"pushed_at":"2025-05-05T17:52:59.000Z","size":2281,"stargazers_count":961,"open_issues_count":23,"forks_count":52,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-05-08T12:42:17.946Z","etag":null,"topics":["javascript","nuxt","nuxtjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nuxt-modules.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-12-08T03:27:36.000Z","updated_at":"2025-05-05T04:49:55.000Z","dependencies_parsed_at":"2023-09-24T17:56:25.044Z","dependency_job_id":"70cbe2f1-f10e-46cb-871b-171b1b2d326c","html_url":"https://github.com/nuxt-modules/device","commit_stats":{"total_commits":221,"total_committers":28,"mean_commits":7.892857142857143,"dds":0.7194570135746606,"last_synced_commit":"ade28506de19fbf43de3038390b784d746d88494"},"previous_names":["dotneet/nuxt-device-detect","nuxt-modules/device","nuxt-community/device-module"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fdevice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fdevice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fdevice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fdevice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxt-modules","download_url":"https://codeload.github.com/nuxt-modules/device/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253256460,"owners_count":21879269,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","nuxt","nuxtjs"],"created_at":"2024-08-01T01:00:53.924Z","updated_at":"2025-05-13T22:03:33.529Z","avatar_url":"https://github.com/nuxt-modules.png","language":"TypeScript","readme":"![Nuxt banner](./.github/assets/banner.png)\n\n# Nuxt Device\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nDetect the type of device in your Nuxt applications.\n\nSee [demo on CodeSandbox](https://codesandbox.io/s/github/nuxt-community/device-module).\n\n## Installation\n\n```bash\nnpx nuxi@latest module add device\n```\n\n\u003e [!NOTE]\n\u003e You can find the Nuxt 2 version of the module on the [`2.x` branch](https://github.com/nuxt-modules/device/tree/2.x).\n\n## Flags\n\nYou can use the following flags to detect the device type:\n\n- `$device.isDesktop`\n- `$device.isMobile`\n- `$device.isTablet`\n- `$device.isMobileOrTablet`\n- `$device.isDesktopOrTablet`\n- `$device.isIos`\n- `$device.isLinux`\n- `$device.isWindows`\n- `$device.isMacOS`\n- `$device.isApple`\n- `$device.isAndroid`\n- `$device.isFirefox`\n- `$device.isEdge`\n- `$device.isChrome`\n- `$device.isSafari`\n- `$device.isSamsung`\n- `$device.isCrawler`\n\nThe user agent is also injected and accessible with `$device.userAgent`.\n\nThe crawler detection is powered by the [crawler-user-agents](https://github.com/monperrus/crawler-user-agents) package.\n\n## Usage\n\nYou can either use the `useDevice()` composable inside a `script setup`, or the `$device` helper directly in the template:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv v-if=\"$device.isDesktop\"\u003eDesktop\u003c/div\u003e\n\n    \u003cdiv v-else-if=\"$device.isTablet\"\u003eTablet\u003c/div\u003e\n\n    \u003cdiv v-else\u003eMobile\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst { isMobile } = useDevice()\n\u003c/script\u003e\n```\n\n### Changing Layout Dynamically\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cNuxtLayout :name=\"$device.isMobile ? 'mobile' : 'default'\"\u003e\n      \u003c!-- page content --\u003e\n    \u003c/NuxtLayout\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\ndefinePageMeta({\n  layout: false\n})\n\u003c/script\u003e\n```\n\n\u003c!-- ### Adding a Custom Flag\n\nYou can add other flags to `$device` by adding a [Nuxt plugin](https://nuxtjs.org/docs/2.x/directory-structure/plugins):\n\n```js\n// plugins/custom-flag.js\nexport default function ({ $device }) {\n  $device.isCustom = $device.userAgent.includes('Custom-Agent') ? true : false\n}\n``` --\u003e\n\n### Options\n\n#### `defaultUserAgent`\n\nSets the default value for the `user-agent` header (useful when running `npm run generate`).\n\nDefault: `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Safari/537.36`\n\n#### `enabled`\n\nEnables the module conditionally.\n\nDefault: `true`\n\n\u003e [!WARNING]\n\u003e This option is deprecated. It will be removed in the next major release.\n\n#### `refreshOnResize`\n\nRefreshes flags on window resize.\n\nDefault: `false`\n\n\u003e [!WARNING]\n\u003e This option is deprecated. It will be removed in the next major release.\n\n## Amazon CloudFront Support\n\nIf the user agent is `Amazon CloudFront`, the module checks for the following headers:  \n\n- `CloudFront-Is-Android-Viewer`\n- `CloudFront-Is-Desktop-Viewer`\n- `CloudFront-Is-IOS-Viewer`\n- `CloudFront-Is-Mobile-Viewer`\n- `CloudFront-Is-Tablet-Viewer`\n\nRead more about determining the viewer's device type in the [Amazon CloudFront docs](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/adding-cloudfront-headers.html#cloudfront-headers-device-type).\n\n\u003e [!CAUTION]\n\u003e `isWindows` and `isMacOS` flags are not available in Amazon CloudFront.\n\n## Cloudflare Support\n\nThis module checks for the `CF-Device-Type` header.\n\nRead more about the device type detection in the [Cloudflare docs](https://developers.cloudflare.com/automatic-platform-optimization/reference/cache-device-type).\n\n## License\n\n[MIT License](./LICENSE)\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/device/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/@nuxtjs/device\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxtjs/device.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/device\n\n[license-src]: https://img.shields.io/github/license/nuxt-modules/device.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://github.com/nuxt-modules/device/blob/main/LICENSE\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","funding_links":[],"categories":["Uncategorized","TypeScript"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-modules%2Fdevice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxt-modules%2Fdevice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-modules%2Fdevice/lists"}