How to use quasar in my existing django project
-
Here I am working on Django project where I am using vue.js for frontend and I want to use Quasar framework in my site. So I need help that how to use quasar in my site. Thanks
-
See here what ‘flavour’ is best for you:
https://quasar.dev/start/pick-quasar-flavour -
Quasar CLI is best, And how to integrate this in my existing Django project
-
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?
-
a html serving backend (using vue.js directly in django)
-
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 -
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
-
@alam yep, refer to the umd section of the docs.
-
Thank you. But will you please suggest me that how to use quasar UMD in my existing Django project
-
Start here:
https://quasar.dev/start/umd -
Thanks @dobbel
-
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 ?.
-
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> -
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 -
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
-
Without your project code I think this is impossible to solve( for me).
You could try to ask help on the discord channel.
