CODEWITHSUNDEEP
laravelvue.jsvuejs2
Imphusius
Imphusius

Reputation: 678

Component inside the default slot

I am fairly new to Vue and currently am working on the first project with it.

I have encountered this problem which I cannot seem to find a solution for, I have "AuthPage.vue" component which has a slot for the message and default slot for content, once I put custom componen in my login.blade.php it should be prefilled in that slot but it says that custom element does not exist. If I replace slot inside .vue file with custom element it seems to be working perfectly. I am not sure what I am doing wrong.

AuthPage.vue

<template>
<div>
    <div class="page-brand-info"></div>

    <div class="page-login-main">
        <img class="brand-img" src="/assets/global/images/logo.jpg">
        <h3 class="font-size-24 text-center"><slot name="title"></slot></h3>
        <slot name="message"></slot>

        <slot></slot>

        <footer class="page-copyright">
            <p>© {{ moment().year() }}. All RIGHT RESERVED.</p>
        </footer>
    </div>
</div>
</template>
<script>
    import LoginForm from './LoginForm.vue';
    import ResetPasswordForm from './ResetPasswordForm.vue';

    export default {
        components: { LoginForm, ResetPasswordForm }
    }
</script>

login.blade.php

@extends('backoffice.layout.auth')

@section('content')
<auth-page>
    <template v-slot:title>Sign In</template>

    <login-form></login-form>
</auth-page>
@endsection

Thank you for your help! Eddie

Upvotes: 0

Views: 1084

Answers (1)

Jack
Jack

Reputation: 787

You'll need to register the LoginForm component globally in order for it to be passed into the AuthPage component as a slot (when passed in directly from a view). This is because, outside the scope of your component, Vue doesn't know what <login-form> is.

Since you're using laravel, in your resources/js/app.js file add the following:

import LoginForm from './path/to/LoginForm.vue';

Vue.component('login-form', LoginForm);

Upvotes: 3

Related Questions