Создание макетов с использованием различных файлов CSS и JS

Я использую Vue 3 с Laravel и хочу создать макет для административной панели и другой для лендинга. В макете административной панели я использую CSS и JS файлы для metronic8 в файле welcome.blade.php, но я хочу загрузить другие стили и скрипты для лендинга. Эта часть из 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>

Но на лендинге я хочу использовать другие скрипты и стили.

Я пытался импортировать стили внутри AdminLayout.vue, но это не работает:

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

Таким образом, какая лучшая практика для этого?

Содержание

Ответ
1. Структура Blade-шаблонов
2. Создание различных представлений
3. Использование Vue компонентов
4. Маршрутизация
Заключение

Ответ

Для того чтобы реализовать разные стили и скрипты для панели администратора и целевой страницы в приложении Vue.js с использованием Laravel, вам нужно учесть несколько аспектов. Мы рассмотрим, как структурировать ваши Blade-шаблоны и компоненты Vue так, чтобы они могли загружать необходимые CSS и JavaScript файлы в зависимости от контекста страницы.

1. Структура Blade-шаблонов

Предположим, у вас есть Blade-шаблон welcome.blade.php, который будет служить основой для обеих страниц (админки и лендинга). Вы можете создать два различных секции для стилей и скриптов в вашем Blade-шаблоне:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Default Title')</title>

    @yield('styles') {{-- место для стилей --}}
</head>
<body id="kt_body" class="@yield('bodyClass')">

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

    @yield('scripts') {{-- место для скриптов --}}
</body>
</html>

2. Создание различных представлений

Теперь создайте два отдельных Blade-шаблона: один для админки и один для лендинга.

admin.blade.php (или любое другое имя, которое вам подходит):

@extends('welcome')

@section('title', 'Панель Администратора')

@section('bodyClass', 'sidebar-enabled')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/assets/plugins/global/plugins.bundle.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/assets/css/styles.bundle.css') }}">
    {{-- Добавьте другие стили для админки --}}
@endsection

@section('scripts')
    <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>
@endsection

landing.blade.php:

@extends('welcome')

@section('title', 'Целевая Страница')

@section('bodyClass', 'landing-page-class') {{-- адаптируйте по необходимости --}}

@section('styles')
    <link rel="stylesheet" href="{{ asset('path/to/your/landing.css') }}">
    {{-- Другие стили для лендинга --}}
@endsection

@section('scripts')
    <script src="{{ asset('path/to/your/landing.js') }}"></script>
    {{-- Другие скрипты для лендинга --}}
@endsection

3. Использование Vue компонентов

Вам стоит создать различные Vue компоненты для каждого из представлений. Например, AdminLayout.vue для админки и LandingLayout.vue для целевой страницы.

Например, в AdminLayout.vue вы можете оставить существующий код, чтобы он не загружал лишние скрипты:

<template>
    <div>
        <AsideAdminLayout />
        <HeaderAdminLayout />
        <!-- Ваш контент -->
    </div>
</template>

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

export default {
    components: {
        AsideAdminLayout,
        HeaderAdminLayout
    }
}
</script>

4. Маршрутизация

Убедитесь, что ваши маршруты в Laravel (или Vue Router) направляют до нужных шаблонов:

// routes/web.php

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

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

Заключение

С таким подходом вы сможете легко управлять и загружать разные CSS и JavaScript файлы для панели администратора и целевой страницы. Это обеспечивает хорошую структуру кода и позволяет избежать конфликта стилей и скриптов между различными частями вашего приложения.