No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How does UMD work in a php project

    CLI
    2
    3
    315
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      Christal last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • C
        Christal last edited by

        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>
        
        1 Reply Last reply Reply Quote 0
        • dobbel
          dobbel last edited by

          Maybe this will help:

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

          1 Reply Last reply Reply Quote 0
          • First post
            Last post