Laravel blade + Vue logic conflict?

Question

Laravel

There is a page, let's say a user, each user has his own custom background. Therefore, for each you need to prescribe your own styles, I did it earlier like this:

@extends('layouts.app')

@section('content')
    <style>
        body {
            background-image: url("{{ $user->background_url }}");
        }
    </style>
    <div class="container user_profile">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="row">
...
@endsection('content')
@push('scripts')
...
@endpush

It was only after I started installing Vue.js that I started getting errors

...
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.

I don’t quite understand how he got here, since there is absolutely no Vue in this template, however, a 1-in component is used on the user’s page in the footer, somehow it renders and sculpts everything that throws an error.
Of course, you can sculpt styles through JS, but this will be incorrect, for sure someone has already encountered a similar one, please tell me how did you solve this?

Answer 1

You get:

<div id="vue-app">
  <!--Blade-->
  <style>.some{}</style>
</div>

It turns out that in the body of the vue tag there is a style tag, look for a blade component in which everything is written like this and transfer the style tag to another place.
I made a section in layout.app outside the vue element and moved the js + css code there.

@extends('layouts.body')

@section('body_content')
  <div id="app">

  @include('menus.top')

  @yield('content')

  @include('menus.bottom')

  </div><!-- #app -->

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

  @yield('page_script')
@endsection