Volt "Single File Component" with <style> + <script> blocks

I work a lot with Vue3 Single File Components, so I really miss being able to add CSS styles and Javascript script blocks directly into the Volt Single File Component.

I was thinking of something like this. (Full example below)

<volt-template> // The regular Blade template
<volt-style lang="scss"> // Style block for CSS, here SCSS. The build process merges all volt-style blocks to css files.
<volt-style lang="scss" inline> // Forces css to be added inline to allow inline variables from PHP. (see example)
<volt-script> // Runs immediately each time the component is used
<volt-script runOnce runOnDomReady> // Run only once for this component, when dom is ready.

I really hope, this is possible. :)

There is a Laravel Mix extension, which does something similary, but I never tried it. (Link added below)

<?php

use Livewire\Volt\Component;

new class extends Component {
    // Name used in Blade template
    public $name = 'Nuno';

    // Color used in inline CSS
    public $inlineCssColor = '#AABBCC';
};

?>

<volt-template>
<div class="InfoComponent">
    <div class="card">
        The name is <span>{ $name }}</span>
    </div>
</div>
</volt-template>

<volt-style lang="scss">
div.InfoComponent {
    div.card {
        border: solid 1px gray;
        color: #333333;
    }
}
</volt-style>

<volt-style lang="scss" inline>
// Forced css to be added inline to allow inline variables from PHP.
div.InfoComponent div.card span {
    color: {{ $inlineCssColor }};
}
</volt-style>

<volt-script>
console.log("log instantly each time component is used");
</volt-script>

<volt-script runOnce runOnDomReady>
console.log("Only run once, if dom is ready");
</volt-script>

Existing extension for Laravel Mix

https://laravel-mix.com/extensions/single-file-blade-components

livewire / volt

Volt "Single File Component" with <style> + <script> blocks #111