How to use quasar in my existing django project

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?

Alam

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

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

Alam

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

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

Alam

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

dobbel

@alam

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

Alam

Thanks @dobbel

Alam

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 ?.

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>

dobbel

@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