Getting error: Failed to mount component

[eybarta]

Hi, thx for your work.. I'm trying to implement it now, and getting this error: Failed to mount component: template or render function not defined. found in --->

Am I doing something wrong? should I be using the runtime version of vue for this to work?

thx!

[93gaurav93]

Thanks @eybarta. We will get back you soon regarding this. @vrajroham Can you take a look at this?

[vrajroham]

@eybarta Could you post your code/snippet please, can't predict what would have gone wrong.

[RibesAlexandre]

Hi,

Same error.

This is my code :

<template>
    <div v-if="allFormats">
        <div v-for="(entry, index) in entries" :key="index">
            <article-default :article="entry" v-if="entry.data_type === 'article' && entry.type === 'article'">

            </article-default>
            <article-full :article="entry" v-if="entry.data_type === 'article' && entry.type === 'article_full'">

            </article-full>
            <article-brief :article="entry" v-if="entry.data_type === 'article' && entry.type === 'brief'">

            </article-brief>

            <carousel v-if="index === 1">
                <div v-for="team in teams">
                    <img :src="team.logo">
                </div>
            </carousel>
        </div>
    </div>
    <div v-else>
        <div v-for="entry in entries">
            <article :article="entry" v-if="entry.data_type === 'article' && entry.type === 'article'"></article>
        </div>
    </div>
</template>

<script>
    //  Articles
    import ArticleFull from "../../editorial/articles/ArticleFull";
    import ArticleBrief from "../../editorial/articles/ArticleBrief";
    import ArticleDefault from "../../editorial/articles/ArticleDefault";

    //  Services
    import TeamsService from "./../../../services/rugby/teams";

    //  Carousel
    import carousel from "v-owl-carousel";

    export default {
        name: "articles",

        data() {
            return {
                allFormats: false,

                teams: [],
                teamsService: new TeamsService()
            };
        },

        props: ['formats', 'entries'],

        components: {ArticleDefault, ArticleFull, ArticleBrief, carousel},

        created() {
            this.allFormats = this.formats;
        },

        mounted() {
            this.getTeams();
        },

        methods: {
            async getTeams() {
                try {
                    let response = await this.teamsService.getTeams();
                    console.log(response);
                    let teams = response.data.teams;

                    this.teams.push(teams['pro-d2'].teams);
                    this.teams.push(teams['top-14'].teams);

                    console.log(this.teams);
                } catch(e) {
                    console.log(e);
                }
            },
        }
    }
</script>

All worked perfectly before trying to use Carousel component.

Any help ?

Thanks.

[alexursul]

Hello! Having the same error, even in this variant:

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

<script>
import carousel from 'v-owl-carousel'
export default {
...
 components: {
        carousel
    }
}
</script>

[dkrasov]

Any updates here?

[93gaurav93]

Resolved! :relieved:

[93gaurav93]

@kristoff2016 This issue is closed now!