CODEWITHSUNDEEP
vue.jsquasar-framework
naoru
naoru

Reputation: 2227

Vue Quasar nin UMD mode renders badly

Im doing a simple demo trying to render some Quasar components doing it using the quasar cli works perfect but when im doing it in a standalone mode, some components are rendering badly as shown in the image

UMD on top cli below

im adding my code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quasar :: Network statistics</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://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.js"></script>

    <div id="main-vue" v-cloak>
      <layout></layout>
    </div>

    <script>
      Vue.component("layout", { template: "#layout" });
    </script>
    <template id="layout">
      <q-layout view="lHh Lpr lFf">
        <q-header elevated>
          <q-toolbar>
            <q-toolbar-title>
              Quasar App
            </q-toolbar-title>

            <q-btn-group push>
              <q-btn
                color="yellow"
                glossy
                text-color="black"
                push
                label="First"
                icon="verified_user"
              />
              <q-btn
                color="amber"
                glossy
                text-color="black"
                push
                label="Second"
              />
              <q-btn
                color="orange"
                glossy
                text-color="black"
                push
                label="Third"
              />
            </q-btn-group>
          </q-toolbar>
        </q-header>

        <q-page-container>
          <slot></slot>
        </q-page-container>
      </q-layout>
    </template>

    <script>
      new Vue({
        el: "#main-vue",
      });
    </script>
  </body>
</html>

Upvotes: 1

Views: 487

Answers (1)

Pratik Patel
Pratik Patel

Reputation: 6978

Just one Problem

Do NOT use self-closing tags, like <q-icon ... />. Instead, go with <q-icon ...></q-icon>.

Try this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quasar :: Network statistics</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://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.js"></script>

    <div id="main-vue" v-cloak>
      <layout></layout>
    </div>

    <script>
      Vue.component("layout", { template: "#layout" });
    </script>
    <template id="layout">
      <q-layout view="lHh Lpr lFf">
        <q-header elevated>
          <q-toolbar>
            <q-toolbar-title>
              Quasar App
            </q-toolbar-title>

            <q-btn-group push>
              <q-btn
                color="yellow"
                glossy
                text-color="black"
                push
                label="First"
                icon="verified_user"
              ></q-btn>
              <q-btn
                color="amber"
                glossy
                text-color="black"
                push
                label="Second"
              ></q-btn>
              <q-btn
                color="orange"
                glossy
                text-color="black"
                push
                label="Third"
              ></q-btn>


            </q-btn-group>
          </q-toolbar>
        </q-header>

        <q-page-container>
          <slot></slot>
        </q-page-container>
      </q-layout>
    </template>

    <script>
      new Vue({
        el: "#main-vue",
      });
    </script>
  </body>
</html>

Upvotes: 3

Related Questions