Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – Make layouts in with different css and js files

i use vue3 with Laravel and I want to make a layout for the admin panel and another one for the landing page, in the layout of the admin panel I use CSS and js files for metronic8 in welcome.blade.php file, but I want to load a different styles and scripts for the landing page.
this part from welcome.blade.php:

<body id="kt_body" class="sidebar-enabled">


<div id="app"></div>


<script src="{{ asset('assets/assets/plugins/global/plugins.bundle.js') }}"></script>
<script src="{{ asset('assets/assets/js/scripts.bundle.js') }}"></script>
<script src="{{ asset('assets/assets/plugins/custom/fullcalendar/fullcalendar.bundle.js') }}"></script>
<script src="{{ asset('assets/assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
<script src="{{ asset('assets/assets/js/widgets.bundle.js') }}"></script>
<script src="{{ asset('assets/assets/js/custom/widgets.js') }}"></script>
<script src="{{ asset('assets/assets/js/custom/apps/chat/chat.js') }}"></script>
<script src="{{ asset('assets/assets/js/custom/utilities/modals/users-search.js') }}"></script>  </body>

but on the landing page, I want to use different scripts and styles,

I tried to import the styles inside the AdminLayout.vue but it’s not working:

<script lang="ts" setup>
import '../../../../public/assets/assets/js/scripts.bundle'
import '../../../../public/assets/assets/js/widgets.bundle'
import '../../../../public/assets/assets/js/custom/widgets'
import '../../../../public/assets/assets/js/custom/apps/chat/chat'
import '../../../../public/assets/assets/js/custom/utilities/modals/users-search'
import '../../../../public/assets/assets/plugins/global/plugins.bundle'
import '../../../../public/assets/assets/plugins/custom/fullcalendar/fullcalendar.bundle'
import '../../../../public/assets/assets/plugins/custom/datatables/datatables.bundle'


import AsideAdminLayout  from './partials/AsideAdminLayout.vue';
import HeaderAdminLayout  from './partials/HeaderAdminLayout.vue';  </script>

so, what is the best practice for doing this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    currently, I use this way:

    1- create landing.blade.php file and use the required CSS and js file inside it, also make a div with id="#app" like this:

    <body>
<!--begin::Main-->


<div id="app"></div>

 <!-- scripts for landing page -->
<script src="{{ asset('landing/vendors/popper/popper.min.js') }}"></script>
<script src="{{ asset('landing/vendors/bootstrap/bootstrap.min.js') }}"></script>
<script src="{{ asset('landing/vendors/anchorjs/anchor.min.js') }}"></script>
<script src="{{ asset('landing/vendors/is/is.min.js') }}"></script>
<script src="{{ asset('landing/vendors/fontawesome/all.min.js') }}"></script>
<script src="{{ asset('landing/vendors/lodash/lodash.min.js') }}"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
<script src="{{ asset('landing/vendors/prism/prism.js') }}"></script>
<script src="{{ asset('landing/vendors/swiper/swiper-bundle.min.js') }}"></script>
<script src="{{ asset('landing/assets/js/theme.js') }}"></script> </body>

    2- create a different route for the landing page that views landing.blade.php as this:

    Route::get('/', function () {
    return view('landing');
});
Route::get('/admin', function () {
    return view('welcome');
});

    3- don't use router-link if you want to go from the admin panel to the landing page and vice versa, instead use the <a href="/"></a>

    I don't know if it's the best practice for my case or not, but it's working and meets the need.


  2. 0

    If you’re using layout approach, you can create two different layout files, in resources/views/layouts for example:

    1. landing.blade.php
    2. admin.blade.php

    Both of those will have different styles and content inside of them.

    After that, inside your landing view, you can extend landing layout file like this:

    @extends('layouts.landing')
   {{--Landing page content--}}
@endsection

    And inside your welcome view, you extend admin layout:

    @extends('layouts.admin')
   {{--Admin/Welcome page content--}}
@endsection

    You can read more in official documentation:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search