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

jeremykenedy jeremykenedy · Accepted Answer · 2020-03-21T07:04:43

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

Laravel - Parse Blade to Vue Component

2 Answers