Vuejs Component and slot is not working together

I am 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

tisuchi

6 years ago

Best Answer

Level 70

@alexgodbehere79

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);

1 like

AlexGodbehere79

6 years ago

Level 1

Thank you very much :)

Please or to participate in this conversation.