CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Dmitry
Dmitry

Reputation: 25

How to import the folder as Vue component

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?

Upvotes: 1

Views: 310

Answers (1)

Hammerbot
Hammerbot

Reputation: 16344

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

Upvotes: 1

Related Questions