How does UMD work in a php project

[Christal]

Hi ,
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?

[Christal]

I am trying 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-toolbar-title>
				<q-avatar>
					<img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
				</q-avatar>
				Title
				</q-toolbar-title>
		
				<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>
			<!-- drawer content -->
			</q-drawer>
		
			<q-drawer show-if-above v-model="right" side="right" bordered>
			<!-- drawer content -->
			</q-drawer>
		
			<q-page-container>
			</q-page-container>
		
			<q-footer elevated class="bg-grey-8 text-white">
			<q-toolbar>
				<q-toolbar-title>
				<q-avatar>
					<img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
				</q-avatar>
				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>

[dobbel]

Maybe this will help:

https://github.com/quasarframework/quasar-starter-kit-umd