Contribution: UMD Sample script #13244

murugappanrm · 2022-04-23T10:45:55Z

murugappanrm
Apr 23, 2022

Hi,

After reading more on Vuejs and a a udemy tutorial i got to understand how to the CDN version of vuejs and the UMD version of Quasar. The following is a working code for the UMD sample shown under Quasar UMD option. The script also shows how to inject child component. Please use, if acceptable, to update the UMD option documentation:

The code is:

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

  <title>Quasar App - myapp</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"
    type="text/css">
  <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.prod.css" rel="stylesheet" type="text/css">

  <style type="text/css">
    .logo-container {
      width: 255px;
      height: 242px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

    .logo {
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="q-app">
    <q-layout view="lHh Lpr fff">
      <q-header elevated class="glossy">
        <q-toolbar>
          <q-btn flat dense round @click="drawerState = !drawerState" aria-label="Menu" icon="menu"></q-btn>

          <q-toolbar-title>
            Quasar App
          </q-toolbar-title>

          <div>Quasar v{{ $q.version }}</div>
        </q-toolbar>
      </q-header>

      <q-drawer v-model="drawerState" bordered content-class="bg-grey-2">
        <q-list>
          <q-item-label header>Essential Links</q-item-label>
          <q-item clickable tag="a" target="_blank" href="https://quasar.dev">
            <q-item-section avatar>
              <q-icon name="school"></q-icon>
            </q-item-section>
            <q-item-section>
              <q-item-label>Docsx</q-item-label>
              <q-item-label caption>quasar.dev</q-item-label>
            </q-item-section>
          </q-item>
          <q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/">
            <q-item-section avatar>
              <q-icon name="code"></q-icon>
            </q-item-section>
            <q-item-section>
              <q-item-label>Github</q-item-label>
              <q-item-label caption>github.com/quasarframework</q-item-label>
            </q-item-section>
          </q-item>
          <q-item clickable tag="a" target="_blank" href="https://chat.quasar.dev">
            <q-item-section avatar>
              <q-icon name="chat"></q-icon>
            </q-item-section>
            <q-item-section>
              <q-item-label>Discord Chat Channel</q-item-label>
              <q-item-label caption>chat.quasar.dev</q-item-label>
            </q-item-section>
          </q-item>
          <q-item clickable tag="a" target="_blank" href="https://forum.quasar.dev">
            <q-item-section avatar>
              <q-icon name="forum"></q-icon>
            </q-item-section>
            <q-item-section>
              <q-item-label>Forum</q-item-label>
              <q-item-label caption>forum.quasar.dev</q-item-label>
            </q-item-section>
          </q-item>
          <q-item clickable tag="a" target="_blank" href="https://twitter.com/quasarframework">
            <q-item-section avatar>
              <q-icon name="rss_feed"></q-icon>
            </q-item-section>
            <q-item-section>
              <q-item-label>Twitter</q-item-label>
              <q-item-label caption>@quasarframework</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-drawer>

      <q-page-container>
        <!-- Injecting the Child Component
        The component name is the one defined as 
        app.component("childComp", {}) in the child
        component definition
        -->
        <child-comp></child-comp>
      </q-page-container>
    </q-layout>
  </div>

  <!-- Defining the template for the child component
  The css id must match the one in the child component definition
  -->

  <script type="text/x-template" id="child-temp">
      <q-page padding>
       <!-- page content of child component; replace this entirely -->
        <div>
          <div class="row flex-center absolute-full">
            <img src="quasar-logo-full.svg">
            <h1 class="text-center"> {{ title}} </h1>
          </div>
        </div>

      </q-page>
    </script>


  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.prod.js"></script>

  <script>


    let app = Vue.createApp({
      setup() {
        return {
          version: Quasar.version,
          drawerState: Vue.ref(true),

        }
      }
    });

    /*
    Creating  a child Component
    */

    app.component('childComp', {
      name: 'child-comp',
      setup() {
        return {
          title: 'This is the child component',
        };
      },
      /*
      Define the child html template here
      and define the css id which is #child-temp.
      */
      template: '#child-temp',
    });


    app.use(Quasar)
    app.mount('#q-app')
  </script>
</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Contribution: UMD Sample script #13244

{{title}}

Replies: 0 comments

Select a reply

Contribution: UMD Sample script #13244

murugappanrm Apr 23, 2022

Replies: 0 comments

murugappanrm
Apr 23, 2022