I'm failry new to VueJs so keep that in mind.

I've got single template ponent like this

 <template>
    <div class="testing-container">
        <button v-on:click="toggleContainer" class="btn btn-success btn-sm show-testing-container">Testing <i v-if="!show" class="fa fa-chevron-up"></i><i v-if="show" class="fa fa-chevron-down"></i></button>
        <div v-if="show" class="testing-frame">
            <vue-tabs active-tab-color="#e74c3c"
                      active-text-color="white"
                      type="pills"
                      :start-index="1"
                      direction="vertical"
            >
                <v-tab title="First tab" icon="ti-user">
                    First Tab
                </v-tab>

                <v-tab title="Second tab" icon="ti-settings">
                    Second tab content
                </v-tab>

                <v-tab title="Third tab" icon="ti-check">
                    Third tab content
                </v-tab>
            </vue-tabs>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                show: false,
            };
        },
        created() {
        },
        methods: {
            toggleContainer() {
                if(this.show){
                    this.show = false;
                }else{
                    this.show = true;
                }
            },
        }
    }
</script>

I'm trying to load in another ponenet called vue-tabs but I keep getting

[Vue warn]: Failed to mount ponent: template or render function not defined. found in ---> <VueTabs>

This is my constructor stuff:

/**
 * Import Vue Tabs
 */
import VueTabs from "vue-nav-tabs"
/**
 * Vue Nav Tabs
 */
Vueponent('vue-tabs', VueTabs)
/**
 * Units Testing Component
 */
Vueponent('unit-testing',
    require('./ponents/testing/UnitTesting.vue')
);

const app = new Vue({
    el: '#app',
});

Gulp Watch is not throwing any Not found Errors so I'm really confused as to what is going on here. I appreciate for the help in advance.

I'm failry new to VueJs so keep that in mind.

I've got single template ponent like this

 <template>
    <div class="testing-container">
        <button v-on:click="toggleContainer" class="btn btn-success btn-sm show-testing-container">Testing <i v-if="!show" class="fa fa-chevron-up"></i><i v-if="show" class="fa fa-chevron-down"></i></button>
        <div v-if="show" class="testing-frame">
            <vue-tabs active-tab-color="#e74c3c"
                      active-text-color="white"
                      type="pills"
                      :start-index="1"
                      direction="vertical"
            >
                <v-tab title="First tab" icon="ti-user">
                    First Tab
                </v-tab>

                <v-tab title="Second tab" icon="ti-settings">
                    Second tab content
                </v-tab>

                <v-tab title="Third tab" icon="ti-check">
                    Third tab content
                </v-tab>
            </vue-tabs>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                show: false,
            };
        },
        created() {
        },
        methods: {
            toggleContainer() {
                if(this.show){
                    this.show = false;
                }else{
                    this.show = true;
                }
            },
        }
    }
</script>

I'm trying to load in another ponenet called vue-tabs but I keep getting

[Vue warn]: Failed to mount ponent: template or render function not defined. found in ---> <VueTabs>

This is my constructor stuff:

/**
 * Import Vue Tabs
 */
import VueTabs from "vue-nav-tabs"
/**
 * Vue Nav Tabs
 */
Vue.ponent('vue-tabs', VueTabs)
/**
 * Units Testing Component
 */
Vue.ponent('unit-testing',
    require('./ponents/testing/UnitTesting.vue')
);

const app = new Vue({
    el: '#app',
});

Gulp Watch is not throwing any Not found Errors so I'm really confused as to what is going on here. I appreciate for the help in advance.

• javascript
• vuejs2
• vue-ponent

• What is your build setup? Are you flowing through something like vue-loader or gulp-vueify? The vue file is a convenience format. It has to be transformed before it can be imported. – zero298 Commented Feb 6, 2018 at 18:42
• I'm not sure if this is the same thing but I'm using gulp to build it, and from what I undesrtand it uses laravel elixir to webpack app.js – Vilius Commented Feb 6, 2018 at 18:45
• 2 Have you tried doing import { VueTabs } from "vue-nav-tabs"? – sliptype Commented Feb 6, 2018 at 18:45
• 1 @sklingler93 , this did the job, can you possibly tell me what is the difference, considering other examples don't have the brackets? – Vilius Commented Feb 6, 2018 at 18:48
• The examples do use the brackets for local registration: vuejs.creative-tim./vue-tabs/#/?id=ponent-registration – sliptype Commented Feb 6, 2018 at 18:52

1 Answer 1

Using es6 imports:

import VueTabs from "vue-nav-tabs"

will import the default export from the module as VueTabs (which is a vue plugin in this case, not the ponent you are trying to use).

While:

import { VueTabs } from "vue-nav-tabs"

will import the VueTabs export from the module.