UMD css not working



  • Hi, I am new to quasar. I created sample quasar page and it’s not working. CSS and JS are not working. I added the code below. Please anyone tell me what is the issue.

    <!DOCTYPE html>
    <html>
      <!--
        WARNING! Make sure that you match all Quasar related
        tags to the same version! (Below it's "@1.11.2")
      -->
      <head>
          <!-- Do you need Material Icons? -->
          <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
        
          <!-- Do you need Fontawesome? -->
          <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
        
          <!-- Do you need Ionicons? -->
          <link href="https://cdn.jsdelivr.net/npm/ionicons@^4.0.0/dist/css/ionicons.min.css" rel="stylesheet">
        
          <!-- Do you need MDI? -->
          <link href="https://cdn.jsdelivr.net/npm/@mdi/font@^2.0.0/css/materialdesignicons.min.css" rel="stylesheet">
        
          <!-- Do you need all animations? -->
          <link href="https://cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css" rel="stylesheet">
        
        
          <!--
            Finally, add Quasar's CSS:
            Replace version below (0.17.8) with your desired version of Quasar.
            Replace ".mat" with ".ios" for the iOS theme.
            Add ".rtl" for the RTL support (example: quasar.mat.rtl.min.css).
          -->
          <link href="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.8/dist/umd/quasar.mat.min.css" rel="stylesheet" type="text/css">
        </head>
        
        <body>
            <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-tabs align="left">
                        <q-route-tab to="/page1" label="Page One" />
                        <q-route-tab to="/page2" label="Page Two" />
                        <q-route-tab to="/page3" label="Page Three" />
                      </q-tabs>
                    </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>
                      <router-view />
                    </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>
          <!-- Do you want IE support? Replace "0.17.8" with your desired Quasar version -->
          <script src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.8/dist/umd/quasar.ie.polyfills.umd.min.js"></script>
        
          <!-- You need Vue too -->
          <script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
        
          <!--
            Add Quasar's JS:
            Replace version below (0.17.8) with your desired version of Quasar.
            Replace ".mat" with ".ios" for the iOS theme.
          -->
          <script src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.8/dist/umd/quasar.mat.umd.min.js"></script>
        
          <!--
            If you want to add a Quasar I18n language pack (other than "en-us").
            Notice "pt-br" in "i18n.pt-br.umd.min.js" for Brazilian Portuguese language pack.
            Replace version below (0.17.8) with your desired version of Quasar.
            Also check final <script> tag below to enable the language
            Language pack list: https://github.com/quasarframework/quasar/tree/dev/i18n
          -->
          <script src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.8/dist/umd/i18n.pt-br.umd.min.js"></script>
        
          <!--
            If you want to make Quasar use a specific set of icons (unless you're using Material Icons already).
            Replace version below (0.17.8) with your desired version of Quasar.
            Icon sets list: https://github.com/quasarframework/quasar/tree/dev/icons
          -->
          <script src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.8/dist/umd/icons.fontawesome.umd.min.js"></script>
        
          <script>
            // if using a Quasar language pack other than the default "en-us";
            // requires the language pack style tag from above
            Quasar.i18n.set(Quasar.i18n.ptBr) // notice camel-case "ptBr"
        
            // if you want Quasar components to use a specific icon library
            // other than the default Material Icons;
            // requires the icon set style tag from above
            Quasar.icons.set(Quasar.icons.fontawesome) // fontawesome is just an example
        
            /*
              Example kicking off the UI.
              Obviously, adapt this your specific needs.
             */
        
            // custom component example, assumes you have a <div id="my-page"></div> in your <body>
            Vue.component('my-page', {
              template: '#my-page'
            })
        
            // start the UI; assumes you have a <div id="q-app"></div> in your <body>
            new Vue({
              el: '#q-app',
              data: function () {
                return {
                  left:false,
                  right:false
                }
              },
              methods: {},
              // ...etc
            })
          </script>
        </body>
    </html>
    

    This is the output image

    Screenshot from 2020-05-18 07-36-59.png

    Please help me



  • Whý are you using 0.17 ? That’s your first mistake.

    Follow the directions here please: https://quasar.dev/start/umd

    Scott



  • Ok thanks Scott. I will check it


Log in to reply