Quasar Framework

shawna

Is it possible to use Quasar UMD mode without using CDNs.
The project requires the website to work in a closed network. I tried to download the CDN files and serve it on local server, but the browser generates bug: Uncaught ReferenceError: Vue is not defined.

Please let me know if it is possible to use Quasar UMD without using CDNs, and the proper way to achieve it.

shawna

When using Quasar UMD mode, I found an error that appeared in IE but not FF nor Chrome. Here is the console error msg:
Screenshot (51).png
And my demo code:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link
        href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons|Material+Icons+Outlined"
        rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@^4.0.0/css/materialdesignicons.min.css" rel="stylesheet"
        type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/quasar@1.9.9/dist/quasar.min.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="q-app">
        <q-item dense>
            <q-item-section>
                <q-item-label>Time zone</q-item-label>
            </q-item-section>
            <q-item-section>
                <q-select dense outlined options-dense :options='timezoneOptions' v-model='timezone' emit-value
                    map-options></q-select>
            </q-item-section>
        </q-item>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.9.9/dist/quasar.ie.polyfills.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.9.9/dist/quasar.umd.min.js"></script>
    <script>
        new Vue({
            el: '#q-app',
            data: function () {
                return {
                    timezone: 1,
                    timezoneOptions: [
                        { label: '(GMT-12:00) Eniwetok, Kwajalein', value: 0 },
                        { label: '(GMT-11:00) Midway Island, Samoa', value: 1 }
                        // ... the rest of timezone
                    ]
                }
            }
        })
    </script>
</body>

</html>

Thanks for helping me!

shawna

@shawna

Latest posts made by shawna