UMD - Adding Quasar to existing website

AdrianG

Hi
I’m new to Quasar and Vue. Right now I’m trying to start using Quasar on our current ASP.Net website, where my plan is to slowly replace each page one by one to upgrade them. My plan is to start with the menu/layout, before I go to the first page
I was thinking it would make sense to use the Layout Builder to quickly generate some code, then build a left side menu that links to all the pages (open each page in the center part of the layout) like:
\OldPages\Page1.aspx
\NewPages\Page2.aspx
\OldPages\Page3.aspx

I didn’t get very far, before I started noticing several issues. Unfortunately when I tried to google those issues, it looked like all the solutions was only referring to the CLI version, which as far as I can tell is quite different from UMD

My menu page is (as you can see below) very empty:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="QuasarMenu.aspx.cs" Inherits="QuasarMenu" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <!-- Load Quasar CSS files -->

    <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/quasar@^1.1.2/dist/quasar.css" rel="stylesheet" type="text/css">

</head>

<body>
    <!-- Load quasar javascript files -->

    <script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@^1.1.2/dist/quasar.umd.js"></script>
    <div id="q-app">
        
        <template>
            <q-layout view="hHh LpR fFf">
                <q-header reveal elevated class="bg-primary text-white" height-hint="98">
                    <q-toolbar>
                        <q-btn dense flat round icon="menu" @click="left = !left" ></q-btn>

                        <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-tabs >
                        <q-route-tab to="/page1" label="Page One" ></q-route-tab>
                        <q-route-tab to="/page2" label="Page Two" ></q-route-tab>
                        <q-route-tab to="/page3" label="Page Three" ></q-route-tab>
                    </q-tabs>
                </q-header>

                <q-drawer show-if-above v-model="left" side="left" bordered>
                        <h1>{{ Page1Title }}</h1>
                </q-drawer>

                <q-page-container>
                    <router-view>

                    </router-view>
                </q-page-container>
            </q-layout>
        </template>
    </div>
    <script src="Quasar/JavaScript/QuasarMenu.js">

    </script>
    </div>
</body>

</html>

QuasarMenu.js:

Vue.config.devtools = true;
Vue.config.debug = true;

new Vue(
    {
        el: '#q-app',
        data: {
            left: false,
            Page1Title: 'Bacon'
        }
    })

But I’m already getting some problems I can’t make any sense of. When I’m opening the Console in Chrome, I can see the following errors:

[Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

Sounds like it is missing any information about Router. I did find some mentioning the need to add the follow as a script:
https://unpkg.com/vue-router/dist/vue-router.js
But that just gives me the error:
Error in render: “TypeError: Cannot read property ‘matched’ of undefined”

What can I do to fix these errors, what am I missing?
Is this layout/routing not available for UMD? How can I get them to refer to my other aspx pages?

s.molinari

You have tabs that are using Vue router (q-route-tab), but you haven’t gotten vue-router implemented. If you aren’t going to be building a SPA, then you can remove the QRouteTabs and just use normal tabs.

Scott

AdrianG

Ok, thanks

No More Posting New Topics!

UMD - Adding Quasar to existing website