UMD css not working

TeslaTuring

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

s.molinari

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

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

Scott

TeslaTuring

Ok thanks Scott. I will check it

No More Posting New Topics!

UMD css not working