jQuery UI Widgets Forums Vue(New) Laravel integration

Tagged: ,

This topic contains 10 replies, has 4 voices, and was last updated by  Peter Stoev 3 months, 2 weeks ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • Laravel integration #102719

    sergion
    Participant

    Hello.

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

    Any help/suggestions/examples will be appreciated!

    Regards,

    Sergio

    Laravel integration #102748

    Hristo
    Participant

    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

    Laravel integration #103576

    godbrain
    Participant

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

    Laravel integration #103590

    Peter Stoev
    Keymaster

    Hi godbrain,

    What do you mean?

    Best Regards,
    Peter Stoev

    jQWidgets team
    https://www.jqwidgets.com

    Laravel integration #103751

    godbrain
    Participant

    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);
    },
    }
    });

    Laravel integration #103764

    Peter Stoev
    Keymaster

    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

    Laravel integration #103822

    godbrain
    Participant

    Thanks Peter, was just a little confusing.

    Laravel integration #105038

    sergion
    Participant

    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!

    Laravel integration #105085

    Peter Stoev
    Keymaster

    The posted example by me is with Vue.js.

    Laravel integration #105110

    sergion
    Participant

    Thanks, Peter!

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

    Regards!

    Laravel integration #105118

    Peter Stoev
    Keymaster

    Hi sergion,

    We do not have showcase Laravel apps.

    Best Regards,
    Peter Stoev

    jQWidgets team
    https://www.jqwidgets.com

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.