Using Blade partials in Vue components

8 July 2018

Sometimes I’ve wanted to include blade template partials inside Vue components, such as when adding Vue components to existing pages. Although combining two template systems is not ideal, you can achieve this with Vue slots.

In your Vue component, add a slot where you want the blade template content to be rendered:

<template>
    <div>
        <!-- Toggle switch etc... -->

        <div v-if="isSelectingExisting">

            <!-- Search field etc... -->

        </div>
        <div v-else>

            <!-- Create form slot, where the partial will be inserted -->
            <slot name="create-form"></slot>

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

<script>
export default {
    data () {
        return {
            isSelectingExisting: false,
        }
    },
}
</script>

Then in you Blade templates you can use the component as normal and render the partial inside:

@section('content')
	<!-- Vue component -->
    <demo-select-or-create>
        <template slot="create-form">
	        <!-- Blade partial -->
	        @include('demo.forms.create')
        </template>
    </demo-select-or-create>
@content