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>
- 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
- Add
nuxt-device-data-attr
dependency to your project
npm install --save-dev nuxt-device-data-attr
- Add
nuxt-device-data-attr
to thebuildModules
section ofnuxt.config.js
export default {
buildModules: [
'nuxt-device-data-attr',
]
}
dependency
(No --dev
or --save-dev
flags) and use modules
section in nuxt.config.js
instead of buildModules
.
Copyright (c) Igor Pylypenko