[Vue warn]: Unknown custom element: <cc-text-area> - did you register the component correctly?

Question

I am making a component InputText.vue as follows:

    <template>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <h4>Edit Text:</h4>
                <textarea class="form-control" cols="50" rows="4" placeholder="Enter text here..." v-model="textBoxInput" @keyup="textChanged"></textarea>
            </div>
        </div>
    </div>
</template>


<script>
    export default{
        data: function(){
            return {
                textBoxInput: ""
            }
        },
        methods: {
            textChanged: function(){
                this.$emit('displayTextChanged', this.textBoxInput);
            }
        }
    }
</script>

Then I am registering and using it in CardFront.vue component as follows:

<style>
    .edit-area {
        padding: 20px;
        height: 800px;
        background-color: #d2f9f9;
    }

    .card-display {
        padding: 20px;
        height: 800px;
    }
</style>


<template>
    <div class="row">
        <div class="card col-sm-6 edit-area">
            <cc-text-area></cc-text-area>
        </div>
        <div class="card col-sm-6 card-display">

        </div>
    </div>
</template>


<script>
    import TextInput from './TextInput.vue'

    export default{
        components: {
            ccTextArea: TextInput
        }
    }
<script>

It gives this error: Error

Please help me out. I am using Vue version 2. Whenever I try to refresh the page, it gives error like: [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Answer 1

I solved the issue. Thank you so much everyone for your help. The issue lied in the closing script tag in CardFront.vue component.

Answer 2

I am making a component InputText.vue as follows:

Check that the filename and component names match.

If you import TextInput from './TextInput.vue' in the using component, then also make sure you name your component that, and optionally add a name property as suggested in the comments.

// TextInput.vue (not InputText.vue)

export default {
  name: 'TextInput',
  
  ...
}