Detect if device is mobile from User Agent on Vuex

index.js

// See https://github.com/nuxt-community/device-module

const mutationTypes = {
  CHANGE_MOBILE: 'CHANGE_MOBILE',
}

const checkIfMobileOnServerSide = ({ req, isServer }) => {
  if (isServer) return false
  const userAgent = req && req.headers['user-agent']
  const isMobile = /mobile/i.test(('' + userAgent).toLowerCase())
  return isMobile
}

export const state = () => ({
  isMobile: false,
})

export const getters = {
  isMobile: state => state.isMobile,
}

export const mutations = {
  [mutationTypes.CHANGE_MOBILE](state, isMobile) {
    state.isMobile = isMobile
  },
}

export const actions = {
  // https://nuxtjs.org/guide/vuex-store/#the-nuxtserverinit-action
  nuxtServerInit({ commit }, context) {
    commit(mutationTypes.CHANGE_MOBILE, checkIfMobileOnServerSide(context))
  },
}