Bagisto Forum

    Bagisto
    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups

    Vue Js in Bagisto

    General Discussion
    2
    6
    423
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • H
      hossein last edited by

      I'm trying to use some components like PrimeVue (https://primevue.org/ ) is it possible to add these kinds of Vue component to Bagisto?
      Is there any document to explain how Bagisto uses the VueJs in frontend(shop)?
      For example why in shop package and frontend you uses <script type="text/x-template"> and <script type="module"> ? Is there any reason?
      Or can we use VueJs component or plugins exactly like the VueJs documentation?
      Why the bagisto implementation of VueJs is different to the VueJs documentation?

      1 Reply Last reply Reply Quote 0
      • Rishabh-Webkul
        Rishabh-Webkul last edited by

        Hello @hossein

        Greetings of the day..!!

        Yes, you can add these components. In Bagisto we didn't use the .vue extension component and hence we created all the components in the Blade files directly.

        This <script type="module"> is to include a JS module in your page. Modules are treated differently than regular JS script files by the browser and thus you need to tell the browser that the file you are including is a module and not a regular JS script file.

        Selection_605.png

        Thanks & Regards..!!

        1 Reply Last reply Reply Quote 0
        • H
          hossein last edited by

          Ok thank you. But I can't add the PrimeVue to the Bagisto, Could you please check what is wrong here?
          1 - I just installed "PrimeVue" in Bagisto version 2.1.0
          bagisto-vue-3-package.png

          2 - I added the basic codes to load PrimeVue.
          bagisto-vue-1.png

          3 - And after that it returns error.
          bagisto-vue-2.png

          Now, would you please let me know how to fix this issue?

          1 Reply Last reply Reply Quote 0
          • Rishabh-Webkul
            Rishabh-Webkul last edited by

            Hello @hossein

            Greetings of the day..!!

            You can go through this link
            https://primevue.org/vite/

            This will help you to resolve your query.

            Thanks & Regards..!!

            H 1 Reply Last reply Reply Quote 0
            • H
              hossein @Rishabh-Webkul last edited by

              Hi @Rishabh-Webkul
              Thank you for your reply, I did, but it returns error when I add

              app.use(PrimeVue)

              As I've shared in my screenshots it returns error and when I remove the code "app.use(PrimeVue)" it works fine. According to my screenshots, do you see any problem in my code?
              Thank you

              H 1 Reply Last reply Reply Quote 0
              • H
                hossein @hossein last edited by

                @hossein
                When I add an external Vue Js library like PrimeVue it loads in app.js correctly and when I get log it returns the correct component but I don't know how to use those components in other sections for example in header or footer it returns undefined. According to your VueJs architecture in Bagisto how can I achieve it?
                I would like to define a component globally and use it on other files. This is my goal.
                Thanks.

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post