Bollate

HTML

[ANSWERED] php – How can I split design of vuejs component from laravel backend dashboard

By

Nov 20, 2022 , , , ,

Solution 1 :

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') }}">

Solution 2 :

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.

Problem :

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.

Comments

Comment posted by Omda

Thank you @Darick, as you said I follow

Comment posted by Potato Science

You just really need to isolate your layouts and make sure that your frontend styling doesn’t affect your backend. Are you reusing your components on your backend?

Comment posted by Omda

No, I just need to edit my theme through the backend and preview the theme in the backend to update logo, menus, contact us, and so on.

Comment posted by Potato Science

You can merge the styles you needed in the backend. “` mix.styles([‘resources/css/backend.css’, ‘resources/css/frontend.css’], ‘public/css/backend.css’) “` If you’re doing a preview of your frontend from the backend side of your application. You might want to do this.

Comment posted by Potato Science

Is there a way I can visualize what you are doing right now. I’ll gladly help

Comment posted by Omda

Thank you for a reply but I couldn’t get you @Bryce Howitson

By

Related Post

HTML

[ANSWERED] html – select all elements within a parent class

Nov 20, 2022
HTML

[ANSWERED] html – Hidden Div Text Reappears?

Nov 20, 2022
HTML

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022