v0.14 beta - <q-layout> inside of App.vue

  • I can’t define my layout inside of App.vue. It seems that that app dont know quasar specific commands like <q-layout> and so on.

    Will i have to import all Quasar modules like in the Hello.vue file???

    Template inside App.vue

    <!-- Don’t drop “q-app” class -->
    <div id=“q-app”>
    <q-layout ref=“layout” view=“hHr LpR lFf” :right-breakpoint=“1100”>
    <!-- Header -->
    <q-toolbar slot=“header”>
    <q-btn flat @click="$refs.layout.toggleLeft()">
    <q-icon name=“menu” />
    Layout Header
    <span slot=“subtitle”>Optional subtitle</span>
    <q-btn flat @click="$refs.layout.toggleRight()">
    <q-icon name=“menu” />
    <!-- Navigation -->
    <q-tabs slot=“navigation”>
    <q-route-tab slot=“title” icon=“view_quilt” to="/test-layout/about" replace hide=“icon” label=“About” />
    <q-route-tab slot=“title” icon=“view_day” to="/test-layout/toolbar" replace hide=“icon” label=“Toolbar” />
    <q-route-tab slot=“title” icon=“view_day” to="/test-layout/tabs" replace label=“Tabs” />
    <q-route-tab slot=“title” icon=“input” to="/test-layout/drawer" replace label=“Drawer” />
    <!-- Left Side Panel -->
    <div slot=“left”>
    <q-list no-border link inset-separator>
    <q-list-header>Essential Links</q-list-header>
    <q-item-side icon=“school” />
    <q-item-main label=“Docs” sublabel=“quasar-framework.org” />
    <q-item-side icon=“record_voice_over” />
    <q-item-main label=“Forum” sublabel=“forum.quasar-framework.org” />
    <q-item-side icon=“chat” />
    <q-item-main label=“Gitter Channel” sublabel=“Quasar Lobby” />
    <q-item-side icon=“rss feed” />
    <q-item-main label=“Twitter” sublabel="@quasarframework" />
    <!-- Right Side Panel -->
    <div slot=“right”>
    Right Side of Layout
    <!-- sub-routes get injected here: -->
    <router-view />
    <!-- Footer -->
    <q-toolbar slot=“footer”>
    Layout Footer

    Screen of my App.vue:


    Browser Code.


  • Admin

    Hi, please have a read at http://beta.quasar-framework.org/components/introduction-for-beginners.html#Using-Quasar-Components
    You can either import them globally or per *.vue file (locally). This is now needed due to tree-shaking.

  • So what would you prefer as best practice? I have never seen this in any other framework.

    Is this a temporarily solution for the beta or will this done generally this way??

  • Admin

    This is actually quite common and reduces the build size of the Webpack bundle. Choose either way (globally or locally) as both are fine.
    This is not a temporary solution, this is required for Webpack tree-shaking to work.

  • @rstoenescu Sorry to jump onto an existing thread, but am I correct in assuming that importing at the local or global level will not affect the size of the build with Webpack tree-shaking?

  • Admin

    Yes. All “vendor” code goes into a single file (/dist/js/vendor.js). Doesn’t matter how many times you import a component and where.

Log in to reply