title: Global Vue Component Styles "Leaking" Over Entire Website
body: <p>What I mean by &quot;Leaking&quot; is the following. I have an About.vue with its own styling (About.scss) and it's own endpoint &quot;/about&quot;. I also have the home page endpoint &quot;/&quot; and its corresponding Laravel blade template (Index.blade.php) with its own styling (Index.scss).</p>
  <p><strong>The Problem</strong></p>
  <p>The style from About.scss is affecting the Index.scss, and they're not even in the same html file that's returned by the server. And it's like this for my entire website. Everything was completely fine before I updated to Laravel Mix ^5.*.</p>
  <p><strong>composer.json</strong></p>
  <pre><code>{
      &quot;name&quot;: &quot;laravel/laravel&quot;,
      &quot;description&quot;: &quot;The Laravel Framework.&quot;,
      &quot;keywords&quot;: [
          &quot;framework&quot;,
          &quot;laravel&quot;
      ],
      &quot;license&quot;: &quot;MIT&quot;,
      &quot;type&quot;: &quot;project&quot;,
      &quot;require&quot;: {
          &quot;php&quot;: &quot;^7.4.1&quot;,
          &quot;algolia/algoliasearch-client-php&quot;: &quot;^2.2&quot;,
          &quot;awobaz/compoships&quot;: &quot;^2.0.0&quot;,
          &quot;barryvdh/laravel-ide-helper&quot;: &quot;^2.4&quot;,
          &quot;benjaminhirsch/nova-slug-field&quot;: &quot;^1.2&quot;,
          &quot;dillingham/nova-conditional-fields&quot;: &quot;^0.0.1&quot;,
          &quot;doctrine/dbal&quot;: &quot;^2.9&quot;,
          &quot;easypost/easypost-php&quot;: &quot;~3.4.4&quot;,
          &quot;facade/ignition&quot;: &quot;^2.3.6&quot;,
          &quot;fideloper/proxy&quot;: &quot;^4.0&quot;,
          &quot;genealabs/nova-prepopulate-searchable&quot;: &quot;^1.0.1&quot;,
          &quot;guzzlehttp/guzzle&quot;: &quot;^7.0.1&quot;,
          &quot;integral/nova-theme&quot;: &quot;*&quot;,
          &quot;laravel/framework&quot;: &quot;^8.0&quot;,
          &quot;laravel/nova&quot;: &quot;^3.0&quot;,
          &quot;laravel/scout&quot;: &quot;^8.3&quot;,
          &quot;laravel/slack-notification-channel&quot;: &quot;^2.0&quot;,
          &quot;laravel/tinker&quot;: &quot;^2.4.2&quot;,
          &quot;laravel/ui&quot;: &quot;^3.0&quot;,
          &quot;predis/predis&quot;: &quot;^1.1&quot;,
          &quot;spatie/laravel-permission&quot;: &quot;^3.17&quot;,
          &quot;staudenmeir/eloquent-has-many-deep&quot;: &quot;^1.7&quot;,
          &quot;stripe/stripe-php&quot;: &quot;^6.16&quot;
      },
      &quot;require-dev&quot;: {
          &quot;barryvdh/laravel-debugbar&quot;: &quot;^3.1&quot;,
          &quot;filp/whoops&quot;: &quot;^2.0&quot;,
          &quot;fzaninotto/faker&quot;: &quot;^1.4&quot;,
          &quot;laravel/telescope&quot;: &quot;^4.0&quot;,
          &quot;mockery/mockery&quot;: &quot;^1.0&quot;,
          &quot;nunomaduro/collision&quot;: &quot;^5.0&quot;,
          &quot;phpunit/phpunit&quot;: &quot;^9.0&quot;
      },
      &quot;autoload&quot;: {
          &quot;psr-4&quot;: {
              &quot;App\\&quot;: &quot;app/&quot;,
              &quot;Database\\Factories\\&quot;: &quot;database/factories/&quot;,
              &quot;Database\\Seeders\\&quot;: &quot;database/seeders/&quot;
          }
      },
      &quot;autoload-dev&quot;: {
          &quot;psr-4&quot;: {
              &quot;Tests\\&quot;: &quot;tests/&quot;
          }
      },
      &quot;repositories&quot;: [
          {
              &quot;type&quot;: &quot;composer&quot;,
              &quot;url&quot;: &quot;https://nova.laravel.com&quot;
          },
          {
              &quot;type&quot;: &quot;path&quot;,
              &quot;url&quot;: &quot;./nova-components/NovaTheme&quot;
          },
          {
              &quot;type&quot;: &quot;vcs&quot;,
              &quot;url&quot;: &quot;https://github.com/EasyPost/easypost-php&quot;
          }
      ],
      &quot;extra&quot;: {
          &quot;laravel&quot;: {
              &quot;dont-discover&quot;: []
          }
      },
      &quot;scripts&quot;: {
          &quot;post-root-package-install&quot;: [
              &quot;@php -r \&quot;file_exists('.env') || copy('.env.example', '.env');\&quot;&quot;
          ],
          &quot;post-create-project-cmd&quot;: [
              &quot;@php artisan key:generate&quot;
          ],
          &quot;post-autoload-dump&quot;: [
              &quot;Illuminate\\Foundation\\ComposerScripts::postAutoloadDump&quot;,
              &quot;@php artisan package:discover&quot;
          ]
      },
      &quot;config&quot;: {
          &quot;preferred-install&quot;: &quot;dist&quot;,
          &quot;sort-packages&quot;: true,
          &quot;optimize-autoloader&quot;: true
      },
      &quot;minimum-stability&quot;: &quot;dev&quot;,
      &quot;prefer-stable&quot;: true
  }
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>import headerComponent from './components/HeaderComponent.vue';
  import aboutView from './components/About/About.vue';
  
  Vue.component('header-component', headerComponent);
  Vue.component('about-view', aboutView);
  
  const app = new Vue({
      el: '#app'
  });
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code> &quot;devDependencies&quot;: {
          &quot;axios&quot;: &quot;^0.18.1&quot;,
          &quot;bootstrap&quot;: &quot;^4.5.0&quot;,
          &quot;cross-env&quot;: &quot;^5.2.1&quot;,
          &quot;jquery&quot;: &quot;^3.5.1&quot;,
          &quot;laravel-mix&quot;: &quot;^5.0.7&quot;,
          &quot;lodash&quot;: &quot;^4.17.20&quot;,
          &quot;popper.js&quot;: &quot;^1.16.1&quot;,
          &quot;resolve-url-loader&quot;: &quot;^3.1.2&quot;,
          &quot;sass&quot;: &quot;^1.27.2&quot;,
          &quot;sass-loader&quot;: &quot;^7.3.1&quot;,
          &quot;vue&quot;: &quot;^2.6.12&quot;,
          &quot;vue-template-compiler&quot;: &quot;^2.6.12&quot;
      },
      &quot;dependencies&quot;: {
          &quot;@easypost/api&quot;: &quot;^3.8.1&quot;,
          &quot;algoliasearch&quot;: &quot;^3.35.1&quot;,
          &quot;fs&quot;: &quot;0.0.1-security&quot;,
          &quot;gsap&quot;: &quot;^2.1.3&quot;,
          &quot;node-vibrant&quot;: &quot;^3.1.5&quot;,
          &quot;npm&quot;: &quot;^7.0.6&quot;,
          &quot;rgbaster&quot;: &quot;^2.1.1&quot;,
          &quot;stickyfilljs&quot;: &quot;^2.1.0&quot;,
          &quot;update&quot;: &quot;^0.7.4&quot;,
          &quot;vue-carousel&quot;: &quot;^0.11.0&quot;,
          &quot;vue-instantsearch&quot;: &quot;^2.7.0&quot;,
          &quot;vue-moment&quot;: &quot;^4.1.0&quot;,
          &quot;vue-stripe-elements-plus&quot;: &quot;^0.2.10&quot;,
          &quot;vue2-collapse&quot;: &quot;^1.0.15&quot;,
          &quot;vue2-touch-events&quot;: &quot;^2.2.1&quot;,
          &quot;vuelidate&quot;: &quot;^0.7.5&quot;
      }
  </code></pre>
  <p><strong>webpack.mix.js</strong></p>
  <pre><code>let mix = require('laravel-mix');
  mix.js('resources/assets/js/app.js', 'public/js')
     .sass('resources/assets/sass/app.scss', 'public/css');
  </code></pre>
  <p><strong>web.php</strong></p>
  <pre><code>&lt;?php
  
  Route::get('/', 'GeneralPagesController@index');
  
  Route::get('/about', 'GeneralPagesController@about');
  </code></pre>
  <p><strong>GeneralPagesController.php</strong></p>
  <pre><code>&lt;?php
  
  namespace App\Http\Controllers;
  
  use Illuminate\Http\Request;
  use App\HomePageNews;
  
  
  class GeneralPagesController extends Controller
  {
    public function index()
      {
          $news = HomePageNews::all();
  
          return view(&quot;integral.index&quot;, compact(&quot;news&quot;));
      }
  
      public function about()
      {
          return view(&quot;integral.about&quot;);
      }
  }
  </code></pre>
  <p><strong>About.vue</strong></p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;wrapper&quot;&gt; More component stuff..&lt;/div&gt;
  &lt;/template&gt;
  &lt;style src=&quot;./About.scss&quot; scoped lang=&quot;scss&quot;&gt;&lt;/style&gt;
  &lt;style lang=&quot;scss&quot;&gt;
      body, html {
          height: 100%;
          overflow: hidden;
      }
  
      #desktop-footer {
          display: none !important;
      }
  
      #articleViewMount {
          height: 100%;
      }
  &lt;/style&gt;
  </code></pre>
  <p><strong>about.blade.php</strong></p>
  <pre><code>@extends(&quot;integral.integralLayouts.master&quot;)
  
  @section(&quot;title&quot;)
  About
  @endsection
  
  @section(&quot;Styles&quot;)
   &lt;meta name=&quot;csrf-token&quot; content=&quot;{{ csrf_token() }}&quot;&gt;
  
  @endsection
  
  @section(&quot;sectionOne&quot;)
  
   &lt;div id=&quot;articleViewMount&quot;&gt;
    &lt;about-view&gt;&lt;/about-view&gt;
   &lt;/div&gt;
  
  @endsection
  
  </code></pre>
  <p><strong>index.blade.php AKA Homepage</strong></p>
  <pre><code>@extends(&quot;integral.integralLayouts.master&quot;)
  
  
  @section(&quot;Styles&quot;)
     
      &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;/css/index.css&quot;/&gt;
  @endsection
  
  // Home page html stuff...
  </code></pre>
  <p><strong>integral.integralLayouts.master.blade.php</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;title&gt;@yield(&quot;title&quot;)&lt;/title&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;/css/master.css&quot;&gt;
      &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;/css/mobilemenu.css&quot;&gt;
  
  
      @yield(&quot;Styles&quot;)
  &lt;/head&gt;
  
  &lt;body&gt;
      @yield(&quot;LoadingLogo&quot;)
  
      &lt;!-- HEADER &amp; NAV BAR --&gt;
      @include(&quot;integral.integralLayouts.header&quot;)
  
  &lt;!--SECTION ONE--&gt;
      @yield(&quot;sectionOne&quot;)
  
  &lt;!-- Flash Messaging --&gt;
  
      &lt;div id=&quot;flashComponentMount&quot;&gt;
          &lt;flash message=&quot;{{ session('flash') }}&quot;&gt;&lt;/flash&gt;
      &lt;/div&gt;
  
  &lt;!-- FOOTER --&gt;
      @include(&quot;integral.integralLayouts.footer&quot;)
  
  &lt;script src=&quot;{{ mix('js/app.js') }}&quot;&gt;&lt;/script&gt;
  
  @yield(&quot;Scripts&quot;)
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>Things I've tried:</strong></p>
  <p>Adding the &quot;scoped&quot; attribute to my styles and it fixes the issue sort of, but then this also breaks the styling of other pages on my website.</p>
  <p>This is what I get in the console before commenting <code>overflow: hidden;</code> and <code>display: none !important;</code>of the unscoped styling.</p>
  <p><strong>index/home page</strong></p>
  <p>This shows the home page's styling being affected by About.scss. Here, overflow is hidden, just like in About.scss.
  <a href="https://i.stack.imgur.com/Xl3sW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xl3sW.png" alt="This is the index/home page. It shows the styling being affected by About.scss" /></a></p>
  <p>Here's the footer component, which is implemented by integral.integralLayouts.master.blade.php, being affected by About.scss as well. You can see the <code>display: none !important;</code> present on the footer tag.
  <a href="https://i.stack.imgur.com/Sgh6i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sgh6i.png" alt="Here's the footer component being affected by About.scss as well." /></a></p>
  <p>When I comment <code>overflow: hidden;</code> and <code>display: none !important;</code> of the unscoped styling in About.vue, this is what happens.</p>
  <p><strong>About.vue</strong></p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;wrapper&quot;&gt;&lt;/div&gt;
  &lt;/template&gt;
  &lt;script src=&quot;./About.js&quot;&gt;&lt;/script&gt;
  &lt;style src=&quot;./About.scss&quot; scoped lang=&quot;scss&quot;&gt;&lt;/style&gt;
  &lt;style lang=&quot;scss&quot;&gt;
      body, html {
          height: 100%;
          /*overflow: hidden;*/
      }
  
      #desktop-footer {
          /*display: none !important;*/
      }
  
      #articleViewMount {
          height: 100%;
      }
  &lt;/style&gt;
  </code></pre>
  <p>The <code>overflow: hidden;</code> is no longer applied to the html tag of index.blade.php.</p>
  <p><a href="https://i.stack.imgur.com/XxiOE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XxiOE.png" alt="enter image description here" /></a></p>
  <p>And neither is <code>display: none !important;</code> being applied from About.vue to the footer component.</p>
  <p><a href="https://i.stack.imgur.com/fHL8V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fHL8V.png" alt="enter image description here" /></a></p>
  <p><strong>Edit</strong></p>
  <p>Per @matticustard's suggestion, I also just tried registering my vue components globally like so but to no avail.</p>
  <pre><code>Vue.component('header-component', require('./components/HeaderComponent.vue').default);
  Vue.component('about-view', require('./components/About/About.vue').default);
  
  const app = new Vue({
      el: '#app'
  });
  </code></pre>
  <p><strong>Why would this happen now and not before? It's been working fine for a few years now.</strong></p>