quasar UMD in a php project

I need to create a component which can be used in a php project as well. Do I have to crate the component in vue and duplicate the same code in php page using UMD? or is there any other method?

I am testing below code in a html page but getting blank page

<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/dist/quasar.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.umd.min.js"></script>

<div id="q-app">
  <q-layout view="hHh lpR fFf">
        
            <q-header elevated class="bg-primary text-white" height-hint="98">
            <q-toolbar>
                <q-btn dense flat round icon="menu" @click="left = !left" />
        
                <q-btn dense flat round icon="menu" @click="right = !right" />
            </q-toolbar>
        
            </q-header>
        
            <q-drawer show-if-above v-model="left" side="left" bordered>
            </q-drawer>
        
            <q-drawer show-if-above v-model="right" side="right" bordered>
            </q-drawer>
        
            <q-page-container>
            </q-page-container>
        
            <q-footer elevated class="bg-grey-8 text-white">
            <q-toolbar>
                <q-toolbar-title>
                Title
                </q-toolbar-title>
            </q-toolbar>
            </q-footer>
        
        </q-layout>
</div>


<script>
new Vue({
  el: '#q-app',
  data: function () {
    return {
      version: Quasar.version,
      left: false,
      right: false
    }
  },
  methods: {
    notify: function () {
      this.$q.notify('Running on Quasar v' + this.$q.version)
    }
    }
})
</script>

It actually works.
See in action: https://codepen.io/disfated/pen/QWyYQXN

I only removed self-closed q-btn tags:

<q-btn dense flat round icon="menu" @click="left = !left"></q-btn>
<q-btn dense flat round icon="menu" @click="right = !right"></q-btn>

(You can read more on why it's needed and other caveats when using in-DOM templates, here)

Also added some content to demonstrate that everything functions well.

It appears that something from "outside world" is somehow prevents your code from working. Take a closer look to Console and Network tabs in browser console. Something there should give you a hint about what's causing the issue.