No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

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

    How to use quasar in my existing django project

    Framework
    3
    16
    725
    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.
    • dobbel
      dobbel @Alam last edited by dobbel

      @alam

      Depends , does you existing django site act as:

      • a html serving backend (using vue.js directly in django)

      or

      • an API for your seperate vue.js frontend?
      1 Reply Last reply Reply Quote 0
      • A
        Alam last edited by

        a html serving backend (using vue.js directly in django)

        dobbel 1 Reply Last reply Reply Quote 0
        • dobbel
          dobbel @Alam last edited by dobbel

          @alam

          a html serving backend (using vue.js directly in django)

          Then you can’t use Quasar CLI. You have to use Quasar in UMD mode.

          See again:
          https://quasar.dev/start/pick-quasar-flavour

          1 Reply Last reply Reply Quote 0
          • A
            Alam last edited by

            Hi, we are using this line: "<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>" in our html file to make vue.js work in our site. I think this is what UMD mode is. Please correct me if I am wrong. Thanks

            metalsadman 1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman @Alam last edited by

              @alam yep, refer to the umd section of the docs.

              1 Reply Last reply Reply Quote 0
              • A
                Alam last edited by

                Thank you. But will you please suggest me that how to use quasar UMD in my existing Django project

                dobbel 1 Reply Last reply Reply Quote 0
                • dobbel
                  dobbel @Alam last edited by

                  @alam

                  Start here:
                  https://quasar.dev/start/umd

                  1 Reply Last reply Reply Quote 0
                  • A
                    Alam last edited by

                    Thanks @dobbel

                    1 Reply Last reply Reply Quote 0
                    • A
                      Alam last edited by

                      Hi sir. actually the reason why I have used quasar framework. I am building a multistep form wizard where we have two flows one is personal flow and other is business flow. So here personal flow means in a first step form we have a category field. so while user enters a category we are prompting a next step based on category selection. same as well in business flow too but here if user enters a category based on category we are prompting the next step. But in this case in a second step by default we have a personal ad radio button so if we click on that radio button after that based on category entered in a first step I have to prompt the template after user click the radio button so to achieve this we are using quasar frame work. So we can do that in quasar frame work ?.

                      dobbel 1 Reply Last reply Reply Quote 0
                      • A
                        Alam last edited by Alam

                        This is my code please let me know where I am going wrong

                        <!DOCTYPE html>
                        <html>
                        <head>
                          <meta name="viewport" content="width=device-width, initial-scale=1">
                          <script type="text/javascript" src="https://unpkg.com/vue@2.0.4/dist/vue.js"></script>
                        <!--  quasar farme work UMD in a head part-->
                            <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
                            <link href="https://cdn.jsdelivr.net/npm/quasar@1.15.4/dist/quasar.min.css" rel="stylesheet" type="text/css">
                          </head>
                        </head>
                        <body>
                        <!--here I have give "Id = 'q-vk_app'" to mount this with a vue.js -->
                        <div id="vk_app">
                          <form>
                        <!--Here is a first step. So in this step we have category field where user enters a category and based on that category we are prompting the-->
                        <!--other templates-->
                            <div v-if="step === 1">
                        
                              <h1>Step One</h1>
                              <p>
                                <legend for="name">Your Name:</legend>
                                <input id="name" name="name" v-model="category">
                              </p>
                        
                              <button @click.prevent="next()">Next</button>
                        
                            </div>
                            <div v-if="step === 2">
                        <!--if user logged in as a business user then second step by default we are displaying this radio button template-->
                              {% if user_type == 'business' %}
                              <template>
                                <input type="radio"></br>
                                <button @click.prevent="prev()">Previous</button>
                                <button @click.prevent="next()">Next</button>
                              </template>
                              {% else %}
                        <!--if user enters a category 'laptop' then on next step we are prompting this template -->
                              <template v-if="category == 'laptop'">
                                <h1>template laptop</h1>
                                <button @click.prevent="prev()">Previous</button>
                                9
                                <button @click.prevent="next()">Next</button>
                              </template>
                        <!--if user enters a category 'IT' then on next step we are prompting this template based on category-->
                              <template v-if="category == 'IT'">
                                <h1>template IT</h1>
                                <button @click.prevent="prev()">Previous</button>
                                <button @click.prevent="next()">Next</button>
                              </template>
                        
                        <!--if user enters a category 'computer' then on next step we are prompting this template based on category-->
                              <template v-if="category == 'computer'">
                                <h1>template computer</h1>
                                <button @click.prevent="prev()">Previous</button>
                                <button @click.prevent="next()">Next</button>
                              </template>
                              {% endif %}
                            </div>
                        <!--here is a step 3 div after prompting the category specified fields we prompt this div-->
                            <div v-if="step === 3">
                              <h1>Step Three</h1>
                        
                              <button @click.prevent="prev()">Previous</button>
                              <button @click.prevent="submit()">Save</button>
                        
                            </div>
                          </form>
                        
                          <br/><br/>Debug: {{registration}}
                        </div>
                        
                        <!--Adding a quasar script at the end of the body -->
                          <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
                            <script src="https://cdn.jsdelivr.net/npm/quasar@1.15.4/dist/quasar.umd.min.js"></script>
                        </body>
                        
                        <script>
                          const app = new Vue({
                          el:'#q-vk_app',
                          data() {
                          return {
                          step:1,
                          category:null,
                          street:null,
                          city:null,
                          state:null,
                          numtickets:0,
                          shirtsize:'XL',
                        
                          }
                          },
                          methods:{
                          prev() {
                          this.step--;
                          },
                          next() {
                          this.step++;
                          },
                          submit() {
                          alert('Submit to blah and show blah and etc.');
                          }
                          }
                          });
                        
                        </script>
                        
                        <script>
                          // optional
                          window.quasarConfig = {
                            brand: { // this will NOT work on IE 11
                              primary: '#e46262',
                              // ... or all other brand colors
                            },
                            notify: {...}, // default set of options for Notify Quasar plugin
                            loading: {...}, // default set of options for Loading Quasar plugin
                            loadingBar: { ... }, // settings for LoadingBar Quasar plugin
                            // ..and many more
                          }
                        </script>
                        </body>
                        </html>
                        
                        1 Reply Last reply Reply Quote 0
                        • dobbel
                          dobbel @Alam last edited by

                          @alam

                          Yes for sure, thats can be make in Quasar. But to be fair I have 0 experience in using Quasar in UMD mode, so I will not be able to help you much there.

                          I found this codepen and sandbox that uses Quasar in UMD mode maybe that could be of help:
                          https://codesandbox.io/s/quasar-v1-umd-q306jwnjx6?from-embed
                          https://codepen.io/disfated/pen/QWyYQXN

                          1 Reply Last reply Reply Quote 0
                          • A
                            Alam last edited by

                            Hi dobell I am using quasar UMD for my existing django project. But while i am using UMD in my project the content which is present in html file it is disappearing. So what should be the reason can you please help me

                            dobbel 1 Reply Last reply Reply Quote 0
                            • dobbel
                              dobbel @Alam last edited by

                              @alam

                              Without your project code I think this is impossible to solve( for me).

                              You could try to ask help on the discord channel.

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