ERROR [Vue warn]: option "el" can only be used during instance creation with the `new` keyword

Question

I have the following abbreviated vue component:

    <template>
    <section>
        <v-card class="mx-auto" color="#26c6da" dark max-width="1200">
        <v-carousel >
            <v-carousel-item v-for="(item,i) in items" :key="i" v-html="item.content"> </v-carousel-item>
        </v-carousel>
        </v-card>
    </section>
    </template>


    <script>
    ...........................
    console.log(res);
    export default {
        el: '#app',
        data: function() {
        return {
            items: res
        };
        }
    };
    </script>

    <style scoped>
    #app iframe {
        width: 100%;
        height: 500px;
    }
    </style>

I want to add the css at the bottom to control the carousel appearance. To do this I tried to declare the 'el' property and hang the css on that. I;m getting the error in the title. How do I fix this?

Answer 1

You do not need el: '#app', in your component. That is only used when initiating a new Vue app.

Further your css will automagically be scoped to that component instance per your scoped attribute on the style tag.

If the Iframe is nested in another compnent you will need to use the deep selector:

<style scoped>
    /deep/ iframe {
        width: 100%;
        height: 500px;
    }
</style>

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors