Laravel - Parse Blade to Vue Component

Question

Laravel auth scaffolding creates a layout for the rest of views.

The question is simple: How can convert this layout to vue component?

Blade file. I need to convert to Vue.

<!doctype html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'Laravel') }}</title>
        <script src="{{ asset('js/app.js') }}" defer></script>
        <link rel="dns-prefetch" href="//fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
        <link href=’https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel=”stylesheet”>
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <body>
        <div id="app">
            @yield('content')
        </div>
    </body>
    </html>

Maybe i need more specific. I need to convert a blade layout into a vue component. — El Hombre Sin Nombre
– El Hombre Sin Nombre, Commented Mar 20, 2020 at 22:08
Create a component called Login.vue and put the markup from blade in <template> part of that component. Use that <login> component in the blade. — Ben
– Ben, Commented Mar 20, 2020 at 22:10

tony19 · Accepted Answer · 2022-07-16 01:04:00Z

1

I found a solution. I will create a base vue layout. Then when page load i redirect to the login component and load base layout (importing as a local component). Then when redirect to other page (for example a component with drawer) i will load this component but will load the base layout too.

To help to do that i will use Vue slots. I see how works here. The video is in spanish but i think we can understands it.

edited Jul 16, 2022 at 1:04

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 21, 2020 at 10:11

El Hombre Sin Nombre

3,14219 gold badges55 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jeremykenedy · Accepted Answer · 2020-03-21 07:04:43Z

0

As per the documentation, this is included as of Laravel 5.7

You generate scaffolding and publish the components with:

composer require laravel/ui "^1.0" --dev

php artisan ui vue --auth

It will get you started with an example component so see how you can call that from a blade template.

https://laravel.com/docs/6.x/authentication#included-routing

https://laravel.com/docs/6.x/authentication#included-views

answered Mar 21, 2020 at 7:04

jeremykenedy

4,2751 gold badge19 silver badges28 bronze badges

1 Comment

El Hombre Sin Nombre Over a year ago

But scaffolding creates base layout in php (blade). I need to use (¿or convert in vue maybe?) it in all application because has csrf and other stuff in head tag. The problem is that i need to redirect to drawer component inside a blade but vue router can't call blade files.

Collectives™ on Stack Overflow

Laravel - Parse Blade to Vue Component

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related