Magento 2.2: Is it possible to use Vue.js in Magento?












0















If is possible, how can I integrate it in my custom module?










share|improve this question























  • go through this medium.com/the-vue-storefront-journal/… and this link divante.co/blog/vue-js-storefront-magento-nosql

    – Hitesh
    Nov 29 '18 at 10:16
















0















If is possible, how can I integrate it in my custom module?










share|improve this question























  • go through this medium.com/the-vue-storefront-journal/… and this link divante.co/blog/vue-js-storefront-magento-nosql

    – Hitesh
    Nov 29 '18 at 10:16














0












0








0








If is possible, how can I integrate it in my custom module?










share|improve this question














If is possible, how can I integrate it in my custom module?







magento2 javascript






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 28 '18 at 17:06









chdzmachdzma

37512




37512













  • go through this medium.com/the-vue-storefront-journal/… and this link divante.co/blog/vue-js-storefront-magento-nosql

    – Hitesh
    Nov 29 '18 at 10:16



















  • go through this medium.com/the-vue-storefront-journal/… and this link divante.co/blog/vue-js-storefront-magento-nosql

    – Hitesh
    Nov 29 '18 at 10:16

















go through this medium.com/the-vue-storefront-journal/… and this link divante.co/blog/vue-js-storefront-magento-nosql

– Hitesh
Nov 29 '18 at 10:16





go through this medium.com/the-vue-storefront-journal/… and this link divante.co/blog/vue-js-storefront-magento-nosql

– Hitesh
Nov 29 '18 at 10:16










3 Answers
3






active

oldest

votes


















0














Finally I've done as follows:





  1. Copy all content of this url insaid you custom module




    /Custom/Module/view/frontend/web/js/vue.js





  2. Configure requirejs-config.js




    /Custom/Module/view/frontend/requirejs-config.js



        var config = {
    map: {
    '*': {
    vue: 'Custom_Module/js/vue'>
    }
    } };




  3. And to use it:




    define([
    'jquery',
    'vue'
    ], function ($, Vue) {
    "use strict";
    // code...
    });








share|improve this answer































    0














    I did some research and found solution.
    Write below code in your phtml file.



    <html>
    <head>
    <title>VueJs Introduction</title>
    <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id = "intro" style = "text-align:center;">
    <h1>{{ message }}</h1>
    </div>
    <script type = "text/javascript">
    var vue_det = new Vue({
    el: '#intro',
    data: {
    message: 'My first VueJS Task'
    }
    });
    </script>
    </body>
    </html>





    share|improve this answer

































      0














      How do i pass the parameters in Vue from template (for example - balance and status)



      <script type="text/x-magento-init">
      {
      "*": {
      "Magento_Ui/js/core/app": {
      "components": {
      "counter": {
      "component": "Magento_Catalog/js/product/view/counter",
      "balance": 1000,
      "status": "admin"
      }
      }
      }
      }
      }






      share








      New contributor




      Andrey Okhotnikov is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.




















        Your Answer








        StackExchange.ready(function() {
        var channelOptions = {
        tags: "".split(" "),
        id: "479"
        };
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function() {
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled) {
        StackExchange.using("snippets", function() {
        createEditor();
        });
        }
        else {
        createEditor();
        }
        });

        function createEditor() {
        StackExchange.prepareEditor({
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: false,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: null,
        bindNavPrevention: true,
        postfix: "",
        imageUploader: {
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        },
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        });


        }
        });














        draft saved

        draft discarded


















        StackExchange.ready(
        function () {
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f251685%2fmagento-2-2-is-it-possible-to-use-vue-js-in-magento%23new-answer', 'question_page');
        }
        );

        Post as a guest















        Required, but never shown

























        3 Answers
        3






        active

        oldest

        votes








        3 Answers
        3






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        0














        Finally I've done as follows:





        1. Copy all content of this url insaid you custom module




          /Custom/Module/view/frontend/web/js/vue.js





        2. Configure requirejs-config.js




          /Custom/Module/view/frontend/requirejs-config.js



              var config = {
          map: {
          '*': {
          vue: 'Custom_Module/js/vue'>
          }
          } };




        3. And to use it:




          define([
          'jquery',
          'vue'
          ], function ($, Vue) {
          "use strict";
          // code...
          });








        share|improve this answer




























          0














          Finally I've done as follows:





          1. Copy all content of this url insaid you custom module




            /Custom/Module/view/frontend/web/js/vue.js





          2. Configure requirejs-config.js




            /Custom/Module/view/frontend/requirejs-config.js



                var config = {
            map: {
            '*': {
            vue: 'Custom_Module/js/vue'>
            }
            } };




          3. And to use it:




            define([
            'jquery',
            'vue'
            ], function ($, Vue) {
            "use strict";
            // code...
            });








          share|improve this answer


























            0












            0








            0







            Finally I've done as follows:





            1. Copy all content of this url insaid you custom module




              /Custom/Module/view/frontend/web/js/vue.js





            2. Configure requirejs-config.js




              /Custom/Module/view/frontend/requirejs-config.js



                  var config = {
              map: {
              '*': {
              vue: 'Custom_Module/js/vue'>
              }
              } };




            3. And to use it:




              define([
              'jquery',
              'vue'
              ], function ($, Vue) {
              "use strict";
              // code...
              });








            share|improve this answer













            Finally I've done as follows:





            1. Copy all content of this url insaid you custom module




              /Custom/Module/view/frontend/web/js/vue.js





            2. Configure requirejs-config.js




              /Custom/Module/view/frontend/requirejs-config.js



                  var config = {
              map: {
              '*': {
              vue: 'Custom_Module/js/vue'>
              }
              } };




            3. And to use it:




              define([
              'jquery',
              'vue'
              ], function ($, Vue) {
              "use strict";
              // code...
              });









            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Dec 31 '18 at 8:50









            chdzmachdzma

            37512




            37512

























                0














                I did some research and found solution.
                Write below code in your phtml file.



                <html>
                <head>
                <title>VueJs Introduction</title>
                <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
                </head>
                <body>
                <div id = "intro" style = "text-align:center;">
                <h1>{{ message }}</h1>
                </div>
                <script type = "text/javascript">
                var vue_det = new Vue({
                el: '#intro',
                data: {
                message: 'My first VueJS Task'
                }
                });
                </script>
                </body>
                </html>





                share|improve this answer






























                  0














                  I did some research and found solution.
                  Write below code in your phtml file.



                  <html>
                  <head>
                  <title>VueJs Introduction</title>
                  <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
                  </head>
                  <body>
                  <div id = "intro" style = "text-align:center;">
                  <h1>{{ message }}</h1>
                  </div>
                  <script type = "text/javascript">
                  var vue_det = new Vue({
                  el: '#intro',
                  data: {
                  message: 'My first VueJS Task'
                  }
                  });
                  </script>
                  </body>
                  </html>





                  share|improve this answer




























                    0












                    0








                    0







                    I did some research and found solution.
                    Write below code in your phtml file.



                    <html>
                    <head>
                    <title>VueJs Introduction</title>
                    <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
                    </head>
                    <body>
                    <div id = "intro" style = "text-align:center;">
                    <h1>{{ message }}</h1>
                    </div>
                    <script type = "text/javascript">
                    var vue_det = new Vue({
                    el: '#intro',
                    data: {
                    message: 'My first VueJS Task'
                    }
                    });
                    </script>
                    </body>
                    </html>





                    share|improve this answer















                    I did some research and found solution.
                    Write below code in your phtml file.



                    <html>
                    <head>
                    <title>VueJs Introduction</title>
                    <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
                    </head>
                    <body>
                    <div id = "intro" style = "text-align:center;">
                    <h1>{{ message }}</h1>
                    </div>
                    <script type = "text/javascript">
                    var vue_det = new Vue({
                    el: '#intro',
                    data: {
                    message: 'My first VueJS Task'
                    }
                    });
                    </script>
                    </body>
                    </html>






                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    edited Dec 31 '18 at 12:03









                    chdzma

                    37512




                    37512










                    answered Dec 31 '18 at 11:38









                    Vishal SanwarVishal Sanwar

                    113




                    113























                        0














                        How do i pass the parameters in Vue from template (for example - balance and status)



                        <script type="text/x-magento-init">
                        {
                        "*": {
                        "Magento_Ui/js/core/app": {
                        "components": {
                        "counter": {
                        "component": "Magento_Catalog/js/product/view/counter",
                        "balance": 1000,
                        "status": "admin"
                        }
                        }
                        }
                        }
                        }






                        share








                        New contributor




                        Andrey Okhotnikov is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                        Check out our Code of Conduct.

























                          0














                          How do i pass the parameters in Vue from template (for example - balance and status)



                          <script type="text/x-magento-init">
                          {
                          "*": {
                          "Magento_Ui/js/core/app": {
                          "components": {
                          "counter": {
                          "component": "Magento_Catalog/js/product/view/counter",
                          "balance": 1000,
                          "status": "admin"
                          }
                          }
                          }
                          }
                          }






                          share








                          New contributor




                          Andrey Okhotnikov is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                          Check out our Code of Conduct.























                            0












                            0








                            0







                            How do i pass the parameters in Vue from template (for example - balance and status)



                            <script type="text/x-magento-init">
                            {
                            "*": {
                            "Magento_Ui/js/core/app": {
                            "components": {
                            "counter": {
                            "component": "Magento_Catalog/js/product/view/counter",
                            "balance": 1000,
                            "status": "admin"
                            }
                            }
                            }
                            }
                            }






                            share








                            New contributor




                            Andrey Okhotnikov is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                            Check out our Code of Conduct.










                            How do i pass the parameters in Vue from template (for example - balance and status)



                            <script type="text/x-magento-init">
                            {
                            "*": {
                            "Magento_Ui/js/core/app": {
                            "components": {
                            "counter": {
                            "component": "Magento_Catalog/js/product/view/counter",
                            "balance": 1000,
                            "status": "admin"
                            }
                            }
                            }
                            }
                            }







                            share








                            New contributor




                            Andrey Okhotnikov is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                            Check out our Code of Conduct.








                            share


                            share






                            New contributor




                            Andrey Okhotnikov is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                            Check out our Code of Conduct.









                            answered 3 mins ago









                            Andrey OkhotnikovAndrey Okhotnikov

                            1




                            1




                            New contributor




                            Andrey Okhotnikov is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                            Check out our Code of Conduct.





                            New contributor





                            Andrey Okhotnikov is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                            Check out our Code of Conduct.






                            Andrey Okhotnikov is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                            Check out our Code of Conduct.






























                                draft saved

                                draft discarded




















































                                Thanks for contributing an answer to Magento Stack Exchange!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid



                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.


                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function () {
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f251685%2fmagento-2-2-is-it-possible-to-use-vue-js-in-magento%23new-answer', 'question_page');
                                }
                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                Popular posts from this blog

                                Magento 2 controller redirect on button click in phtml file

                                Polycentropodidae