I checked several times, but my option API is working after I converted it to a composite API not working. I don't know what's wrong with it and it doesn't show any errors. However, it's not printing anything on the screen like my option API did. It only shows a warning.

runtime-core.esm-bundler.js:40 [Vue warn]: Failed to resolve component: onboardland If this is a native custom element, make sure to exclude it from component resolution via

This is my composite api that not working

<template>
  <div>
    <onboardland />
    <onboardshow />
  </div>
</template>

<script>
import onboardland from './onboardland.vue'
import onboardshow from './onboardshow.vue'

export default {
  setup() {
    return {
      components: {
        onboardland,
        onboardshow
      }
    };
  }
};
</script> 

below is option api that is working

<template>
  <div>
    <onboardland />
    <onboardshow />
  </div>
</template>

<script>
import onboardland from './onboardland.vue'
import onboardshow from './onboardshow.vue'

export default {
  components: {
    onboardland,
    onboardshow
  }
}
</script>

CodePudding user response：

You can use different styles in Vue 3 when using the composition API to define the components inside a Vue SFC.

You could use the <script setup> approach or you can use a normal <script> with the setup function and optional defineComponent.

With <script setup>

<template>
  <div>
    <OnboardLand />
    <OnboardShow />
  </div>
</template>

<script setup>
import OnboardLand from './onboardland.vue'
import OnboardShow from './onboardshow.vue'

// composition goes here...
</script>

With defineComponent

<template>
  <div>
    <OnboardLand />
    <OnboardShow />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import OnboardLand from './onboardland.vue'
import OnboardShow from './onboardshow.vue'

export default defineComponent({
  components: {
    OnboardLand,
    OnboardShow,
  },
  setup(props) {
    // composition goes here.
  },
})
</script>