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:
Browser Code.
-
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??
-
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?
-
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.
