Laravel Core-UI

Best Answer

Level 5

Using this Admin template as well. Took me a while to sort out how to implement it in Laravel 5.4. Started with the static HTML version and added vue components later on.

Below is my app.blade.php layout file to get you started

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title', app_name())</title>

    <!-- Meta -->
    <meta name="description" content="@yield('meta_description', 'New Project')">
    <meta name="author" content="@yield('meta_author', 'Active Monkeys')">
    @yield('meta')

    <!-- Styles -->
    @yield('before-styles')
    <link media="all" type="text/css" rel="stylesheet" href="{{ asset('css/fonts/font-awesome.min.css') }} ">
    <link media="all" type="text/css" rel="stylesheet" href="{{ asset('css/fonts/simple-line-icons.css') }} ">
    {{ Html::style(mix('/css/style.css')) }}
    @yield('after-styles')

    <!-- Scripts -->
    <script>
        window.Laravel =
        <?php echo json_encode([
                       'csrfToken' => csrf_token(),
                   ]); ?>
    </script>
</head>

<body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden footer-fixed">

@include('includes.partials.logged-in-as')
@include('backend.includes.nav')

<div class="app-body">
    @include('backend.includes.sidebar')
    <main class="main">
        {!! Breadcrumbs::renderifexists() !!}
        @include('includes.partials.messages')
        @yield('content')
    </main>
    @include('backend.includes.aside')
</div>

@include('backend.includes.footer')




<!-- Bootstrap and necessary plugins -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>

<!-- General Theme script -->
<script src="{{ asset('js/backend/app.js') }}"></script>

<!-- Custom scripts required -->
@yield('before-scripts')
{{--{{ Html::script(mix('js/backend/backend.js')) }}--}}
@yield('after-scripts')
</body>
</html>

2 likes

KNietzsche

8 years ago

Level 17

I think the best approach with Laravel is to develop the applications on several pages, in blade templates and Vue components, with the router in Laravel, instead of SPA.

Which solution is better ? That's a question I'm asking myself as well at this stage...If some people have some experience about using one technique rather than another, and would like to share... And thanks for the example !

srlopez

OP

8 years ago

Level 1

@ActiveMonkey Thanks very much. Just one question more. Which is the directory structure to setup that template? How do you merge both projects, Laravel directory structure and CoreUI assets and components?

Nice template!

ActiveMonkey

8 years ago

Level 5

You're welcome @srlopez. Please have a look here: http://laravel-boilerplate.com/

In this boilerplate they have used AdminLTE (bootstrap 3) as their Admin Template. Basically what I did is following the directory structure of this boilerplate replacing the AdminLTE code with the CoreUI code.

Apart from that you need to setup webpack.mix.js for Laravel Mix, add the CoreUI css & js files to your laravel resources/assets directory and create a app.scss file based on your needs.

1 like