r/vuejs•
Gabotron_ES

Placing components inside a container component without actually doing so?

Hi everybody, I have a laravel app where basically all blade views are composed of vue components, my blade file looks like this:

@section('content')
<div class="LAYOUTcolumn2">
    <contact-card-10></contact-card-10>
    <section class="LAYOUTwrapper_section">
        <layout-title-2 :title="'Donde estamos'"></layout-title-2>
        <contact-card-11></contact-card-11>
    </section>
    <sub-form-1></sub-form-1>
</div>
@endsection

Take a lok at the div with class "LAYOUTcolumn2", this element is basically a container with some side padding and flex-direction:column, now I'd like to transform this into a component with props I can reuse, something like this:

<template>
<div class="LAYOUTcolumn1_maincontainer" style="max-height:100%; min-height:100%; height:auto; display:flex: flex-direction:column; position:relative; padding:40px 100px;">
    <div class="LAYOUTcolumn1_image" style="width:100%; height:100%; position:absolute; z-index:-1; top:0px; left:0px;background-repeat:repeat;  background-image:url('https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/rP_Spr6hgj0zfv3yf/videoblocks-decrease-lighting-wooden-texture-with-natural-wood-pattern-top-view_hfeyhcjytg_thumbnail-full06.png');">
        <div class="LAYOUTcolumn1_overlay" style="width:100%; height:100%; position:absolute; top:0px; left:0px; background-color:rgba(0,0,0,0.82);"></div>
    </div>
    <!--OTHER COMPONENTS SHOULD APPEAR HERE-->
</div>
</template>

How could I do this? I want to place the components inside my padding component BUT still on my blade file without putting the actual components inside my container component, is it possible to have something like this:

@section('content')
<column-component>
    <other-components></other-componenents>
    <other-components></other-componenents>
    <other-components></other-componenents>
    <other-components></other-componenents>
</column-component>
@endsection

Posted May 7, 2019, 6:00 PM UTC

12
Loading comments…