Ad

Vue Allow Components Anywhere, Not Just In #app

Right now I'm setting my Vue instance with the following:

import ListClubsComponent from "./components/clubs/list-clubs.vue";
new Vue({
    el: "#app",
    components: {
        "list-clubs": ListClubsComponent
    }
});

This is working but only if a component is inside of <div id="app"> but the odd thing is that only the Vue component will be rendered, if I have any HTML inside of the app div it will not be rendered.

I am using this on a Laravel with Blade project. My default template is as follows:

<body>

    @include('templates.header')

    <main id="app">
        <h1>This won't be rendered</h1>

        <!-- This will be rendered -->
        <list-clubs :player="{!! $player !!}"></list-clubs>
    </main>

    @include('templates.footer')
</body>

list-clubs.vue

<template>
    <h1>List Clubs Component</h1>
</template>

<script lang="ts">
    import Vue from "vue";
    import Component from "vue-class-component";
    import { Clubs } from "../../modules/clubs";

    export default class ListClubsComponent extends Vue {}
</script>

Ad

Answer

I see that you are importing Component from vue-class-component but you're not using it when you extend Vue in your ListClubsComponent. Funny things happen when you extend vue without using the @Component decorator. Make sure you use it

<script lang="ts">
    import Vue from "vue";
    import Component from "vue-class-component";

    @Component
    export default class ListClubsComponent extends Vue {}
</script>

Ad
source: stackoverflow.com
Ad