1

I want to display different Vue component for the mobile device. And I found this solution (https://stackoverflow.com/a/48515205/11079653) via mixin.

And, for example, I have the component - Card.vue. But for the mobile device, I have created CardMovile.Vue.

Now I want to put these components in the folder Card which will contain index.js

-Card
--Card.vue
--CardMobile.vue
--index.js

After that, I just want import Card in my App.vue and index.js should decide what component needed (Card.vue or Card.mobile.vue)

<template>
  <Card></Card>
</template>

<script>
import Card from './Card'
</script>

is it possible?

Dmitry
  • 25
  • 2

1 Answers1

1

You could try to write the following in the Card/index.js file:

import isMobile from 'is-mobile'

import Card from './Card.vue'
import CardMobile from './CardMobile.vue'

export default isMobile() ? CardMobile : Card
Hammerbot
  • 15,696
  • 9
  • 61
  • 103
  • Note that I use the npm package `is-mobile` in this example but feel free to use whatever function you'd like to detect a mobile browser – Hammerbot Mar 01 '19 at 14:23