Quasar v2

You can use it to submit Github tickets for Quasar v1.

by WoJWoJ

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.prod.css">
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.umd.prod.js"></script>

<div id="q-app">
  <div class="q-ma-md">
    Fork and make your own!
    Do NOT use self-closing tags here on Codepen.
  </div>

  <div class="q-ma-md" @focusin="focusedNoteId=note.id" @focusout="focusedNoteId=0">
    <q-btn label="Notify" color="primary" @click="notify"></q-btn>
    <div>
      some text here hello world
    </div>
  </div>

  <div class="q-ma-md">
    Running Quasar v{{ $q.version }} and isFocused is {{isFocused}}
  </div>
</div>

JavaScript

const { useQuasar } = Quasar

const app = Vue.createApp({
  setup () {
    const $q = useQuasar()

    function notify () {
      $q.notify('Running on Quasar v' + $q.version)
    }
    
    let isFocused = ref(0)
    
    return {
      notify,
      isFocused
    }
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')