I'm confused why it didn't work on my vue file when Im trying to auto import components in my view, the documentation says link you just need to set the components into true inside nuxt.config.js file, I tried but it doesn't work, do I properly import the custom vue?

this is my directory

Components
    >Timeline.vue
    >TimelineItem.vue

This will works fine but I want to automate and remove the importfrom script

<template id="timeline-template">
  <ul >
    <li
      is="TimelineItem"
      v-for="(item, index) in items"
      :key="index"
      :item="item"
    ></li>
  </ul>
</template>

<script>
import TimelineItem from './TimelineItem.vue'
export default {
  components: { TimelineItem },
  props: ['items'],
}
</script>

So I just updated my script like this I just removed the import file since I want to automate it

<script>
export default {}
</script>

Then in my nuxt.config.js I set the component into true

components: true,

This is my TimelineItem.vue

<template id="timeline-item-template">
  <li >
    <div  :>
      <i :></i>
    </div>
    <div >
      <div >
        <h4 >{{ item.title }}</h4>
        <div >
          <div >
            <a
              v-for="(control, index) in item.controls"
              :key="index"
              :control="control"
            >
            </a>
          </div>
          <div >
            <small >{{ item.created }}</small>
          </div>
        </div>
      </div>
      <div >{{ item.body }}</div>
    </div>
  </li>
</template>

<script>
export default {
  props: ['item'],
}
</script>

Updated

I tried using <TimelineItem/> instead using is="TimelineItem but it doesn't work

<template id="timeline-template">
  <ul >
    <TimelineItem v-for="(item, index) in items" :key="index" :item="item" />
  </ul>
</template>

<script>
export default {
  props: ['items'],
}
</script>

CodePudding user response：

OP's issue was fixed by importing TimelineItem inside of components.js!

Everything is working fine, as expected.