Gridstack.js and Vue.js for Laravel dashboard

dashboard.blade.php

@extends('layouts.app')

@section('head')

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdn.jsdelivr.net/lodash/4.17.2/lodash.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.css"/>
    <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js'></script>

@endsection


@section('content')


    <div id="page-wrapper">

        <div class="row">
            <div class="col-lg-12">
                <h1>Dashboard</h1>
                <div class="alert alert-dismissable alert-warning">
                    <button data-dismiss="alert" class="close" type="button">&times;</button>

                    This is a message

                </div>
            </div>
        </div>


        <div class="row">
        </div>
    </div>




    <h1>Gridstack.js and Vue.js</h1>

    {{--https://troolee.github.io/gridstack.js/--}}
    <div class="grid-stack" id="app">

        <dashboard-widget v-for="widget in widgetsList" v-bind:widget="widget"></dashboard-widget>

    </div>


    </div>




@endsection

@section('js')



    <script type="text/javascript">

        /*Gridstack*/

        $(function () {
            var options = {
                cellHeight: 100,
                verticalMargin: 10,
                disableResize: true
            };
            $('.grid-stack').gridstack(options);
        });


        /*Vue*/

        Vue.component('dashboard-widget', {
            props: ['widget'],
            template: '<div class="grid-stack-item"' +
            ':data-gs-width="widget.width" :data-gs-height="widget.height">' + //bind the width to widget .width
            '<div class="panel panel-primary grid-stack-item-content">' +
            '<div class="panel-heading">' +
            '<h3 class="panel-title"><i class="fa fa-bar-chart-o"></i>@{{ widget.title }}</h3>' +
            '</div>' +
            '<div class="panel-body">' +
            '<div id="widget-id-1">@{{ widget.text }}</div>' +
            '</div>' +
            '</div>' +
            '</div>'
        });


        var app = new Vue({
            el: '#app',
            data: {
                widgetsList: [
                    {text: 'Vegetables', width: '2', height: '2', title: 'one'},
                    {text: 'Cheese', width: '2', height: '4', title: 'two'},
                    {text: 'Whatever else humans are supposed to eat', width: '4', height: '2', title: 'three'}
                ]
            }
        })

    </script>





    @foreach($widgets as $widget)
        <script>


            //get all of this from the db

            FusionCharts.ready(function () {
                var revenueChart = new FusionCharts({
                    "type": "{{$widget->widgetType->description}}",
                    "renderAt": "widget-id-{{$widget->id}}",
                    "width": "100%",
                    "height": "100%",
                    "dataFormat": "json",
                    "dataSource": {
                        "chart": {
                            "caption": "{{$widget->caption}}",
                            "subCaption": "{{$widget->subCaption}}",
                            "xAxisName": "{{$widget->xAxisName}}",
                            "yAxisName": "{{$widget->yAxisName}}",
                            "theme": "fint"
                        },
                        "data": [{!! $widget->data !!}]


                    }
                });

                revenueChart.render();
            })


        </script>
    @endforeach


@endsection