How does UMD work in a php project



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



  • 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>
    



Log in to reply