fukuiretu / Nuxt User Agent
Nuxt.js module for handling User-Agent.
Stars: ✭ 102
Programming Languages
typescript
32286 projects
js
455 projects
Projects that are alternatives of or similar to Nuxt User Agent
Nuxt Graphql Request
Easy Minimal GraphQL client integration with Nuxt.js.
Stars: ✭ 85 (-16.67%)
Mutual labels: nuxt, nuxtjs
Realworld Nuxt
Nuxt.js implementation of RealWorld Frontend
Stars: ✭ 45 (-55.88%)
Mutual labels: nuxt, nuxtjs
Quickjam
Starter template for Nuxt apps bundled with an API
Stars: ✭ 42 (-58.82%)
Mutual labels: nuxt, nuxtjs
Docker Nuxt
Docker image to run NUXT.js application in production mode
Stars: ✭ 71 (-30.39%)
Mutual labels: nuxt, nuxtjs
Veluxi Starter
Veluxi Vue.js Starter Project with Nuxt JS and Vuetify
Stars: ✭ 39 (-61.76%)
Mutual labels: nuxt, nuxtjs
Nuxt Tailwind
A Nuxt.js starter project template using Tailwind CSS without the distraction of a complicated development environment.
Stars: ✭ 71 (-30.39%)
Mutual labels: nuxt, nuxtjs
Nuxt Compress
A simple static asset compression module for Nuxt that runs Gzip and Brotli compression during the build process
Stars: ✭ 61 (-40.2%)
Mutual labels: nuxt, nuxtjs
Example Ecommerce Snipcart Vue
The Transglobal Candy Store: Sample front-end for the Sanity.io e-commerce schema with vue.js, nuxt.js, and snipcart
Stars: ✭ 89 (-12.75%)
Mutual labels: nuxt, nuxtjs
Vue Masonry Wall
A pure vue responsive masonry layout without direct dom manipulation and ssr support.
Stars: ✭ 79 (-22.55%)
Mutual labels: nuxt, nuxtjs
Nuxt Template
🗃 Nuxt Template (Typescript + Composition API)
Stars: ✭ 40 (-60.78%)
Mutual labels: nuxt, nuxtjs
Nuxt Netlify
Dynamically generate `_headers` and `_redirects` files for Netlify in your Nuxt.js projects
Stars: ✭ 97 (-4.9%)
Mutual labels: nuxt, nuxtjs
Iblog
基于 Node.js 的开源个人博客系统,采用 Nuxt + Vue + TypeScript 技术栈。
Stars: ✭ 994 (+874.51%)
Mutual labels: nuxt, nuxtjs
How To Safety Env Use In Nuxt
Safe env vars handling sample by Nuxt.js project
Stars: ✭ 38 (-62.75%)
Mutual labels: nuxt, nuxtjs
Laravel Vuejs.com
Laravel and VueJs Blog, using Laravel nova, GraphQL, NuxtJs, Apollo and ...more
Stars: ✭ 54 (-47.06%)
Mutual labels: nuxt, nuxtjs
Nuxt Chat App
Frontend of real-time chat application built using nuxtjs, socket.io. Check the backend at https://github.com/binbytes/chat-app-server.
Stars: ✭ 77 (-24.51%)
Mutual labels: nuxt, nuxtjs
nuxt-user-agent
Nuxt.js module for handling User-Agent.
Inspired by rack-user-agent and, Thanks to woothee 🙏
Setup
Install with yarn:
yarn add nuxt-user-agent
Install with npm:
npm install nuxt-user-agent
nuxt.config.js
module.exports = {
modules: [
'nuxt-user-agent',
]
}
Usage
Component
asyncData
asyncData(context) {
const deviceType = context.$ua.deviceType()
return { deviceType }
}
methods/created/mounted/etc
methods: {
something() {
const deviceType = this.$ua.deviceType()
this.deviceType = deviceType
}
}
Store actions
// In store
{
actions: {
getDeviceType ({ commit }) {
const deviceType = this.$ua.deviceType()
commit('SET_DEVICE_TYPE', deviceType)
}
}
}
template
<template>
<section>
<div v-if="$ua.isFromPc()">
<span>PC</span>
</div>
<div v-if="$ua.isFromSmartphone()">
<span>Smartphone</span>
</div>
<div v-if="$ua.isFromMobilephone()">
<span>Mobilephone</span>
</div>
<div v-if="$ua.isFromTablet()">
<span>Tablet</span>
</div>
<div v-if="$ua.isFromAppliance()">
<span>Appliance</span>
</div>
<div v-if="$ua.isFromCrawler()">
<span>Crawler</span>
</div>
</section>
</template>
Methods
method | type | example |
---|---|---|
deviceType | string | pc |
os | string | Mac OSX |
osVersion | string | 10.12.6 |
browser | string | Chrome |
browserVersion | string | 65.0.3325.181 |
browserVendor | string | |
isFromIphone | boolean | true |
isFromIpad | boolean | true |
isFromIpod | boolean | true |
isFromIos | boolean | true |
isFromAndroidMobile | boolean | true |
isFromAndroidTablet | boolean | true |
isFromAndroidOs | boolean | true |
isFromWindowsPhone | boolean | true |
isFromPc | boolean | true |
isFromSmartphone | boolean | true |
isFromMobilephone | boolean | true |
isFromAppliance | boolean | true |
isFromCrawler | boolean | true |
isFromTablet | boolean | true |
TODO
- [ ] unit test
License
The npm is available as open source under the terms of the MIT License.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].