如何将文件夹导入为Vue组件

Question

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?

Answer 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