Ok. But, I’ve got the following message: “ERROR You are only allowed to edit posts for 3600 second(s) after posting”.
What to do in that case?
Ok. But, I’ve got the following message: “ERROR You are only allowed to edit posts for 3600 second(s) after posting”.
What to do in that case?
This ticket can be closed.
Thanks a lot!
Is it possible to set up QTree component to have multiple nodes on root level as on the screenshot below?
We have Nuxt.js application (SSR mode) and want to use a single Quasar component QMenu for now. I was able to use it in standard Vue.js app (without Nuxt) and everything works fine. But, when I tried to use it in Nuxt.js app it fails.
I’ve created Nuxt plugin quasar.js:
import Vue from 'vue'
import Quasar from 'quasar'
Vue.use(Quasar)
And registered it in nuxt.config.js:
plugins: [
'~/plugins/quasar.js'
],
I’ve also added css in nuxt.config.js:
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' },
After that I’ve added the following to Catalog.vue component:
<template lang="pug">
.q-pa-md
.q-gutter-md.row.items-center
q-btn(color='primary', label='КАТАЛОГ ТОВАРОВ')
q-menu(v-model='showing')
q-list(dense style='min-width: 100px')
q-item(v-for='category in catalog', :key='category.permalink', href='#', clickable='clickable', v-close-popup='v-close-popup')
q-item-section {{ category.title }}
q-item-section(side='side')
q-icon(name='keyboard_arrow_right', v-if='category.hasChildren')
q-menu(anchor='top end', self='top start')
q-list
q-item(v-for='sub in category.subcatalog', :key='sub.permalink', dense='dense', clickable='clickable')
q-item-section {{ sub.title }}
</template>
<script lang="ts">
import Vue from 'vue'
import {
Quasar,
QBtn,
QMenu,
QList,
QItem,
QItemSection,
QIcon,
ClosePopup
} from 'quasar'
export default Vue.extend({
components: {
QBtn,
QMenu,
QList,
QItem,
QItemSection,
QIcon,
},
directives: {
ClosePopup
},
...
And got the following error:
ERROR [Vue warn]: Error in render: "TypeError: Cannot read property 'platform' of undefined" 07:52:13
found in
---> <QBtn>
<Catalog> at src/components/header/nav/Catalog.vue
<BNavbar>
<NavPanel> at src/components/header/NavPanel.vue
<PageHeader> at src/components/PageHeader.vue
<BaseLayout> at src/components/BaseLayout.vue
<Src/layouts/default.vue> at src/layouts/default.vue
<Root>
Is there step-by-step article or post that describes how to use a single (or more) Quasar component in existing Nuxt.js app?
Thank you in advance.
I have Vue.js application in which I use Quasar’s QMenu component and Pug templates.
I don’t have enough experience with Pug and suppose I’ve missed something.
It looks as following:
The code:
Catalog data:
mounted () {
this.catalog = [
{
title: 'Компрессоры',
permalink: 'kompressory',
hasChildren: true,
cover: 'kk',
subcatalog: [
{
title: 'A1',
permalink: 'a1',
hasChildren: false,
cover: 'aa1',
},
{
title: 'B1',
permalink: 'b1',
hasChildren: false,
cover: 'bb1',
},
]
},
{
title: 'Ручной инструмент',
permalink: 'ruchnoy-instrument',
hasChildren: false,
cover: 'rr',
},
{
title: 'Пневмоинструмент',
permalink: 'pnevmoinstrument',
hasChildren: false,
cover: 'pp',
},
{
title: 'Специальный инструмент',
permalink: 'spetsialnyy-instrument',
hasChildren: false,
cover: 'ss',
},
{
title: 'Оборудование для СТО',
permalink: 'garazhnoe-oborudovanie',
hasChildren: false,
cover: 'oo',
},
]
}
Main template:
<template lang="pug">
include ./pug_mixins/createMenu.pug
.q-pa-md
.q-gutter-md.row.items-center
q-btn(color='primary' label='Click me')
q-menu(v-model='showing')
+createMenu(catalog)
q-item(clickable)
q-item-section Preferences
q-item-section(side)
q-icon(name='keyboard_arrow_right')
q-menu(anchor='top end' self='top start')
q-list
q-item(v-for='n in 3' :key='n' dense clickable)
q-item-section Submenu Label
q-item-section(side)
q-icon(name='keyboard_arrow_right')
q-menu(auto-close anchor='top end' self='top start')
q-list
q-item(v-for='n in 3' :key='n' dense clickable)
q-item-section 3rd level Label
q-separator
q-item(clickable v-close-popup)
q-item-section Quit
</template>
Pug mixin - createMenu.pug:
mixin createMenu(catalog)
q-list(dense style='min-width: 100px')
q-item(
v-for="category in catalog"
:key="category.permalink"
href='#'
clickable
v-close-popup
)
q-item-section {{ category.title }}
q-item-section(side)
q-icon(name='keyboard_arrow_right')(v-if="category.hasChildren")
The screenshots:
When I click “Компрессоры” nothing happens. But, when I click “Preferences” the sub menus open.
I suppose there is an issue with v-for in mixin. I’m not sure how to handle this. Should I use Pug’s:
each item in catalog
if item.hasChildren === true
and if so - where to use it?
But, when I try to use - each item in catalog:
mixin createMenu(catalog)
q-list(dense style='min-width: 100px')
each item in catalog
if item.hasChildren
q-item(clickable)
q-item-section {{ category.title }}
q-item-section(side)
q-icon(name='keyboard_arrow_right')
I’ve got an error:
Failed to compile.
./src/App.vue?vue&type=template&id=7ba5bd90&lang=pug& (./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"409580f7-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/pug-plain-loader!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=7ba5bd90&lang=pug&)
Module build failed (from ./node_modules/pug-plain-loader/index.js):
TypeError: Cannot read property 'length' of undefined
at Object.eval (eval at wrap (D:\Test projects\vue_quasar\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:13:32)
at Object.pug_interp [as createMenu] (eval at wrap (D:\Test projects\vue_quasar\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:30:4)
at eval (eval at wrap (D:\Test projects\vue_quasar\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:39:25)
at template (eval at wrap (D:\Test projects\vue_quasar\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:41:7)
at Object.module.exports (D:\Test projects\vue_quasar\node_modules\pug-plain-loader\index.js:13:10)
Actually, I’m trying to write come recursive code that should generate all subitems. How to do it using Quasar and Pug in Vue.js application?