php - How can I split design of vuejs component from laravel backend dashboard

View Original

I am working with laravel app that renders the Vuejs component into blade laravel, it renders the component but it's affected with CSS design of laravel backend cause I preview the component in the backend part, my question is how can I split the CSS design of my Vuejs component from laravel CSS design backend?

header-component.vue

<template>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
  </div>
</template>
<style scoped>
  .container{
    width: 960px;
    margin:auto;
  }
</style>

<style>
    @import '/../frontend/css/all.css';
    @import '/../frontend/css/Animate.css';
    @import '/../frontend/css/bootstrap.min.css';
    @import '/../frontend/css/owl.carousel.min.css';
    @import '/../frontend/css/responsive.css';
    @import '/../frontend/css/style.css';
    .main-header{
        position: relative;
    }
    .parellex{
        margin-top: -125px;
    }
</style>

header.blade.php

@extends('master.app')
@section('content')
     <div style="overflow:auto; position:relative; top: 30px; left:0; right:0; bottom:0" class="mr-5 ml-5">
        <header-component></header-component>
    </div>
@endsection

app.blad.php

<html lang="{{str_replace('_', '-', $lang = app()->getLocale()) }}" dir='{{ $lang=="ar"? "rtl" : "ltr" }}'  style="--primarycolor:#17b3a3;">
<head>
    {{-- {{ dd($lang, Cookie::get('lang')) }} --}}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <title>{{ config('app.name', 'MyApp') }}</title>

    <?php $dir = $lang == "ar"? "rtl":"ltr" ?>

      <!-- START: Template CSS-->
    <link rel="stylesheet" href="{{ asset('backend/'.$dir.'/vendors/bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('backend/'.$dir.'/vendors/jquery-ui/jquery-ui.min.css') }}">
    <link rel="stylesheet" href="{{ asset('backend/'.$dir.'/vendors/jquery-ui/jquery-ui.theme.min.css') }}">
    <link rel="stylesheet" href="{{ asset('backend/'.$dir.'/vendors/simple-line-icons/css/simple-line-icons.css') }}">
    <link rel="stylesheet" href="{{ asset('backend/'.$dir.'/vendors/flags-icon/css/flag-icon.min.css') }}">
    <link rel="stylesheet" href="{{ asset('backend/'.$dir.'/vendors/flag-select/css/flags.css') }}">
    <!-- END Template CSS-->

<body  id="main-container" class="default light small-menu-icon">
    <div id="app">
       <!-- START: Main Content-->
        <main>
             <div class="container-fluid">

                 @include('flash::message')

                <!-- START: Breadcrumbs-->@auth
                 @include('master.partials.breadcrumbs')
                <!-- END: Breadcrumbs-->@endauth

                @yield('content')

             </div>
        </main>
     <!-- END: Main Content-->
    </div>
</body>
</html>

So my question how could I split the design between backend and frontend(Vuejs components)? any Idea or tips, I will be appreciated.

Answer

Solution:

Style Scopes

You can start by scoping the styles for each Vuejs Components

<style scoped>
  .foo {
    background: red
  }
</style>

Using Webpack

In your webpack.mix.js you need to split your resources.

mix.styles(['resources/css/frontend.css'], 'public/css/frontend.css')

mix.styles(['resources/css/backend.css'], 'public/css/backend.css')

Using this in your Laravel application


<!-- Inside backend layout -->
<link rel="stylesheet" href="{{ mix('css/backend.css') }}">

<!-- Inside frontend layout -->
<link rel="stylesheet" href="{{ mix('css/frontend.css') }}">

Answer

Solution:

Not sure which parts are fighting. All the libraries you're loading or the custom code for the component.

First I'd try to load libraries only once. For example, you probably only need one copy of bootstrap.

Second, if its the component code that's fighting (eg main-header) you can add scoped to your Vue Style tags. This makes the styling AND classes unique to that component.

However, I'm not sure what will happen if you make all those imports scoped to the component as well.

I think you're better off, loading all those library components into the whole Vue project (import into main.js) instead of in the component itself. That way you can conditionally load things depending on the environment you're using.

Source