Reopening this Topic as V3.0 has arrived:

Would be great to have a boilerplate how to integrate koolreports with Laravel + Vue + npm to build interactive dynamic reports. Drop-In for spark.laravel.com would be ultimate!

Could be a paid package!

suggested pricing: 99$

Am now facing issues in the vue based frontend of Laravel Spark -

with placing

Vue.config.ignoredElements = ['krwidget'];

in

resources/assets/js/app.js

I got rid of one warning.

However vue does not like javascript code rendered into the templates throwing this warning:

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

Also some widgets e.g. sparklines and chartjs are not rendered reliable.

There seems to be no directive to tell Vue to bypass some html code from processing.

Would be great to have a solution to use KR within a modern vue based fronend.

There seems to be an adapter-solution: https://github.com/ankane/vue-chartkick - maybe you can add this as a pro package?

great - https://github.com/ankane/vue-chartkick seems to be like a good starting point. Also supporting data endpoints to load data from:

<line-chart data="/stocks"></line-chart>

any progress here?

Not a fix, but a quick hack to get past this error: if you install cweagans/composer-patches, you can patch the koolreport/core package, updating ResourceManager::addScriptFile and ResourceManager::addScript to change "text/javascript" to "application/javascript". Oh, and the single instance in widgets/koolphp/Table.tpl.php too.

Follow-up: Another idea, but if you don't need to use Vue on a page (except for the Laravel Spark navigation), you can edit the resources/views/vendor/spark/layouts/app.blade.php page to create a new div and "blade yield directive" below (outside) of the #spark-app div. I added this below that div:

<div id="reports">
    @yield('reports')
</div>

Now the report lives entirely outside of Vue, and in my template, rather than call @section('content'), I call @section('reports'). From a visual perspective, the site appears to be using the main content div. Just another idea for Laravel Spark / generic Vue users.