@im-nazmul I think you can import an asset for a specific view via dynamic imports. Make sure your asset is ok to be imported dynamically. By using dynamic imports, you import the asset only when it's needed in a specific view, rather than loading it globally for all views. I think this is what you need.

Within your view component where you want the asset, call dynamic import. For example, if you're using Vue.js:

<template>
  <div>
    <img :src="dynamicAsset" alt="Dynamic Asset" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicAsset: null
    };
  },
  mounted() {
    import('@/path/to/your/asset').then(module => {
      this.dynamicAsset = module.default;
    });
  }
};
</script>

Similar for alpine.js:

<div x-data="{ dynamicAsset: null }" x-init="() => {
    import('/path/to/your/asset').then(module => {
        dynamicAsset = module.default;
    });
}">
    <img :src="dynamicAsset" alt="Dynamic Asset" />
</div>

First set the dynamic asset as null, x-data="{ dynamicAsset: null }". Then when the component initializes, it will import the asset with x-init.

Even with Livewire, it might be possible with an if conditional. First by checking if the component is init, then you could load it. something like (not sure, never tried):

 @if($importAsset)
        <script src="{{ asset('js/your-asset.js') }}"></script>
 @endif

Vite's default should handle this out of the box, but you might need to tweak it depending on your project.

From Design to Blade

Updated Series Available