nuxt-device-data-attr
v1.2.8
Published
This nuxt module add additional css selectors on body tag for resolve device. ```html <body is-device is-desktop is-desktop-or-tablet> <style> [is-mobile] .someClass { color: red; }
Downloads
519
Readme
nuxt-device-data-attr
This nuxt module add additional css selectors on body tag for resolve device.
<body is-device is-desktop is-desktop-or-tablet>
<style>
[is-mobile] .someClass {
color: red;
}
/* fallback when nuxt-device-data-attr is not available */
@media (max-width: 768px) { {
body:not([is-device]) .someClass {
color: red;
}
}
</style>
<div class="someClass">
This should be red colored on desktop device
</div>
</body>Available css selectors on body:
- is-device (always added)
- is-desktop
- is-mobile
- is-tablet
- is-mobile-or-tablet
- is-desktop-or-tablet
- is-ios
- is-windows
- is-mac-os
- is-android
- is-firefox
- is-edge
- is-chrome
- is-samsung
- is-crawler
Setup
- Add
nuxt-device-data-attrdependency to your project
npm install --save-dev nuxt-device-data-attr- Add
nuxt-device-data-attrto thebuildModulessection ofnuxt.config.js
export default {
buildModules: [
'nuxt-device-data-attr',
]
}⚠️ If you are using Nuxt < v2.9 you have to install the module as a dependency (No --dev or --save-dev flags) and use modules section in nuxt.config.js instead of buildModules.
License
Copyright (c) Igor Pylypenko