[Vuejs]-Using SCSS scoped in Blade like Vue components

by

0👍

you can use blade @stack and @push

in layout.blade.php

@stack('css')

in specific.blade.php

@push('css')
<style>
</style>
@endpush

like this when specific.blade.php will load then only that css will load in layout which is same as vue scoped

ref link
https://laravel.com/docs/8.x/blade#stacks

0👍

I have been in a simular situation. I’m not aware of this being possible without a lot of work (on the blade compiler side). Having <style lang="scss" scoped> in blade would require scss compilation and scoping. A simpler solution would be as Kamlesh suggested, supplying the style in the template.

Something that does come close as well albeit without scss compilation is having the ability to write multiple vue single file component-like components in your blade templates. Vue does not provide this ability (as elegantly as with vue files imho), but with a layer called vue blocks you may achieve the following:

<template component="some-component">
    <div>
        <p>My paragraph</p>
        <div class="some block"></div>
    </div>
    <style scoped>
        :root { 
            background: black;
            padding: 20px;
            margin: 20px;
        }
        p {
            color: red;
            font-weight: bold;
        }
        .block {
            border: 3px solid green;
            height: 20px;
        }
    </style>
    <script>
    // vue component here
    export default { 
       data() { return { } },
       mounted() { 

       }
    }
    </script>
</template>

More information can be found here:

Leave a comment