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

    <template>
    <!-- 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” />
    </q-btn>
    <q-toolbar-title>
    Layout Header
    <span slot=“subtitle”>Optional subtitle</span>
    </q-toolbar-title>
    <q-btn flat @click="$refs.layout.toggleRight()">
    <q-icon name=“menu” />
    </q-btn>
    </q-toolbar>
    <!-- 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” />
    </q-tabs>
    <!-- Left Side Panel -->
    <div slot=“left”>
    <q-list no-border link inset-separator>
    <q-list-header>Essential Links</q-list-header>
    <q-item>
    <q-item-side icon=“school” />
    <q-item-main label=“Docs” sublabel=“quasar-framework.org” />
    </q-item>
    <q-item>
    <q-item-side icon=“record_voice_over” />
    <q-item-main label=“Forum” sublabel=“forum.quasar-framework.org” />
    </q-item>
    <q-item>
    <q-item-side icon=“chat” />
    <q-item-main label=“Gitter Channel” sublabel=“Quasar Lobby” />
    </q-item>
    <q-item>
    <q-item-side icon=“rss feed” />
    <q-item-main label=“Twitter” sublabel="@quasarframework" />
    </q-item>
    </q-list>
    </div>
    <!-- Right Side Panel -->
    <div slot=“right”>
    Right Side of Layout
    </div>
    <!-- sub-routes get injected here: -->
    <router-view />
    <!-- Footer -->
    <q-toolbar slot=“footer”>
    <q-toolbar-title>
    Layout Footer
    </q-toolbar-title>
    </q-toolbar>
    </q-layout>
    </div>
    </template>

    Screen of my App.vue:

    0_1498130173183_upload-3c988cb7-7262-42ec-a152-14080ef36e08

    Browser Code.

    0_1498130245274_upload-124f5e8f-4700-4f3d-9f3e-8aa09fbde3fc


  • 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
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.