Laravel integration

[sergionParticipant]

Hello.

Any experiences/tips for integrating the Vue UI components with Laravel?

Any help/suggestions/examples will be appreciated!

Regards,

Sergio

[HristoParticipant]

Hello Sergio,

Unfortunately, we do not have experience with the “Laravel” library and integration with Vue.
But I try to create a simple example based on the initial demo of this library.
It is very simple.
I create a ‘route’ the new folder “pages” with a file named “jqwidgets.blade.php” as this resources\pages\jqwidgets.blade.php:

<link rel="stylesheet" href="{{URL::asset('assets/jqwidgets/styles/jqx.base.css')}}">
<script type="text/javascript" src="{{URL::asset('assets/jqwidgets/jqx-all.js')}}"></script>

<div id="wrapper">
    <div id="barGauge"></div>
</div>

<script>
    function create() {
        var size = 400;
        $('#barGauge').jqxBarGauge({
            colorScheme: "scheme02",
            width: size,
            height: size,
            values: [102, 115, 130, 137], max: 150, tooltip: {
                visible: true, formatFunction: function (value)
                {
                    var realVal = parseInt(value);
                    return ('Year: 2018<br/>Price Index:' + realVal);
                },
            }
        });
    };

    create();
</script>

Of course in the public folder I create a “assets” folder and within it is a “jqwidgets” folder with our library.
You could download from this page.

We do not have feedback from our customers about any issues with this library.
You could notify me if meet some trouble with this and I will try to provide you with a solution.
Another thing that I would like to ask you – is there any error message in the console or something wrong?

I would like to suggest you look at this and this tutorial.
It demonstrates how to integrate the Laravel with the Vue.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[godbrainParticipant]

What does this have to do with Vue? Isn’t this JQuery code?

[Peter StoevKeymaster]

Hi godbrain,

What do you mean?

Best Regards,
Peter Stoev

jQWidgets team
https://www.jqwidgets.com

[godbrainParticipant]

Hello, Sorry I mean isn’t this JQuery not Vue?

$(‘#barGauge’).jqxBarGauge({
colorScheme: “scheme02”,
width: size,
height: size,
values: [102, 115, 130, 137], max: 150, tooltip: {
visible: true, formatFunction: function (value)
{
var realVal = parseInt(value);
return (‘Year: 2018<br/>Price Index:’ + realVal);
},
}
});

[Peter StoevKeymaster]

Yes, with VUE it would be:

<template>
    <JqxBarGauge :width="getWidth" :height="600" :colorScheme="'scheme02'"
                 :max="150" :values="values" :tooltip="tooltip" />
</template>
<script>
    import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
    export default {
        components: {
            JqxBarGauge
        },
        data: function () {
            return {
                getWidth: getWidth('barGauge'),
                tooltip: {
                    visible: true,
                    formatFunction: (value) => {
                        let realVal = parseInt(value);
                        return ('Year: 2016<br/>Price Index:' + realVal);
                    }
                },
                values: [102, 115, 130, 137]
            }
        }
    }
</script>

My colleague tried to show an approach how to use jQWidgets with Laravel in general. Whether it’s Vue, Angular or React is just a matter of framework. We have the examples and docs how to use our stuff with any of these. We agree, that may be the example Hristo provided is not the best one here.

Best Regards,
Peter Stoev

jQWidgets team
https://www.jqwidgets.com

[godbrainParticipant]

Thanks Peter, was just a little confusing.

[sergionParticipant]

Hey!

After I while I am resuming the project that needs to integrate Laravel with JQ Widgets.

The jquery example above worked well.

Is there a Vue example I can use on Laravel? I know something about Lavarel and Vue, but I must be missing something, as I can’t have it working properly.

Thanks!

[Peter StoevKeymaster]

The posted example by me is with Vue.js.

[sergionParticipant]

Thanks, Peter!

Yes, I saw it, but it would be helpful to see the example in a Laravel app.

Regards!

[Peter StoevKeymaster]

Hi sergion,

We do not have showcase Laravel apps.

Best Regards,
Peter Stoev

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts