Component library nested component reference vUE inconsistent record

In the previous article “Vue3 + TS Component Library” it was written that a vUE dependency in the component library should use peerDependencis. I recently encountered a new problem while writing nested components

  • Nested component: a component in a component library that calls another component of the component library (its own definition)
  1. FwInput components
  • This file is a simple input box component
<template>
    <div><input :placeholder="placeholder" type="text"  /></div>
</template>


<script lang="ts">
import { defineComponent} from 'vue'

export default defineComponent({
    name: 'FwInput'.componentName: 'FwInput'.props: {
        placeholder: {
            type: String.default:'Please fill in'}},mounted(){
        console.log("Component fw - input")}})</script>
Copy the code
  1. FwForm components
  • This component implements a titled component by passing in a title and component type
<template>
  <div class="row">
      <div class="title">{{ title }}</div>
       <component :is="currentTabComponent" class="tab"></component>
  </div>
</template>

<script lang="ts">

import fwInput from '.. /FwInput/index.vue'
import { defineComponent } from 'vue'


export default defineComponent({
    name: 'FwFrom'.componentName: 'FwFrom'.props: {
        title: {
            type:String.default:'title'
        },
        type: {type:String.default:'input'}},computed: {
        currentTabComponent() {
            return 'fw-' + this.type.toLowerCase()
        }
    },
    components: {'fw-input': fwInput
    },
    mounted(){
        console.log("Component fw - form")}})</script>

<style >
.row{
    display: flex;
    justify-content: space-between;
}
</style>
Copy the code
  1. Problem in testing: Input fields are not rendered when using FwForm

For ease of use, I implement this component locally in my business project; Resolve. Alias is configured in the Webpack configuration

'vue3-ts-flow-components': 'D://code/vue3-component'.Copy the code

  • Component project directory: D://code/vue3- Component

  • Business project directory: D://code/ ERP

  • This configuration results in the vue in the node_Modules folder of the component project being called when the render function of the FwForm component is executed. It is correct to call only vue in the business project node_Modules folder from start to finish.

  • NPM install vue3-ts-flow-Components: resolve. Alias: vue3-ts-flow-Components: NPM install vue3-ts-flow-Components: resolve.

How to quickly test their own components, I would like to write test code in the component project! Or do readers have a better idea?

  1. The final render looks like this: