Did you implement the feature? Can you please guide me?

That is what I meant by supplement, sorry I wasn’t more clear. That sounds fantastic and very useful btw, thanks for this plugin!

+1, Would like to see this option too if possible

Wrap them in a parent qform or a form, prolly also need use keep-alive.

Don’t really understand why the performance of clicking on QList has to be >O(n). In this example https://codepen.io/virtuecoder/pen/MWaRewL?editors=1010 clicking on 10 000 QList takes more then 2 seconds, while clicking on the plain div list takes less then 100ms. QVirtualScroll is great improvement for that scenario but not ideal. There is a lag before the next set of items shows on the list while scrolling resulting in a choppy experience. So unfortunately, I find the best solution at the moment is not to use QList for such big collections of items.

Hi sorry, I’m not sure whether this has been marked as resolved or not. Seems like I have same concern: So there will be 3 different environments (e.g: dev, staging, production). It will also have 3 different API url. (how to set these three up without using dot-env ext which failed in Amplify readability) It will have 3 different build commands. which one should I do first and how?

And just in case it matters, here are the results of quasar info for the OLD project: Operating System - Darwin(19.4.0) - darwin/x64 NodeJs - 12.16.3 Global packages NPM - 6.14.4 yarn - Not installed @quasar/cli - 1.0.7 cordova - 8.0.0 Important local packages quasar - 1.11.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time @quasar/app - 1.8.10 -- Quasar Framework local CLI @quasar/extras - 1.8.1 -- Quasar Framework fonts, icons and animations vue - 2.6.10 -- Reactive, component-oriented view layer for modern web interfaces. vue-router - 3.2.0 -- Official router for Vue.js 2 vuex - 3.4.0 -- state management for Vue.js electron - Not installed electron-packager - Not installed electron-builder - Not installed @capacitor/core - Not installed @capacitor/cli - Not installed @capacitor/android - Not installed @capacitor/ios - Not installed @babel/core - 7.9.6 -- Babel compiler core. webpack - 4.43.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff. webpack-dev-server - 3.11.0 -- Serves a webpack app. Updates the browser on changes. workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache. register-service-worker - 1.7.1 -- Script for registering service worker, with hooks typescript - 3.8.3 -- TypeScript is a language for application scale JavaScript development Quasar App Extensions @quasar/quasar-app-extension-icon-genie - 1.1.3 -- A Quasar CLI Extension for Making All Your Icons And for the new TEST project: Operating System - Darwin(19.4.0) - darwin/x64 NodeJs - 12.16.3 Global packages NPM - 6.14.4 yarn - Not installed @quasar/cli - 1.0.7 cordova - 8.0.0 Important local packages quasar - 1.11.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time @quasar/app - 1.8.10 -- Quasar Framework local CLI @quasar/extras - 1.8.1 -- Quasar Framework fonts, icons and animations vue - 2.6.11 -- Reactive, component-oriented view layer for modern web interfaces. vue-router - 3.2.0 -- Official router for Vue.js 2 vuex - 3.4.0 -- state management for Vue.js electron - Not installed electron-packager - Not installed electron-builder - Not installed @capacitor/core - Not installed @capacitor/cli - Not installed @capacitor/android - Not installed @capacitor/ios - Not installed @babel/core - 7.9.6 -- Babel compiler core. webpack - 4.43.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff. webpack-dev-server - 3.11.0 -- Serves a webpack app. Updates the browser on changes. workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache. register-service-worker - 1.7.1 -- Script for registering service worker, with hooks typescript - 3.8.3 -- TypeScript is a language for application scale JavaScript development Quasar App Extensions *None installed*

@walfin Thank you!

To that point too, Svelte isn’t a library or framework, but rather a language extension. Scott

@mousedown.stop on the textarea solves this issue for now. https://codepen.io/turigeza/pen/jObJJYR?editors=1010 <q-tab-panel name="mails"> <div class="text-h6">Mails</div> <div> <q-input v-model="text" label="Standard" /> </div> <div> <q-input v-model="textarea" label="Standard" type="textarea" @mousedown.stop /> </div> </q-tab-panel>

Stupid me. The doc explicitly says: If your content also has images, you might want to add draggable=“false” to them, otherwise the native browser behavior might interfere in a negative way.

@stefanvh said in Would you use Vue + Quasar to build a Marketing site?: @Ben-Hayat I don’t want to hijack your topic so let me know if I have to move this discussion somewhere else. I’m also feeling uncomfortable here… So, for example simple blog functionality. There needs to be a way to authenticate the user with an username and password. The authentication returns an authorization token. With the authorization token the user should be able to create a blog post (e.g. POST /posts). Unauthenticated people should be able to retrieve this post (e.g. GET /posts or /posts/1). This post is prefetched in Quasar and then displayed in a QCard for example. JSON-API covers creating and fetching resources (the posts), but authentication and even authorization can be performed in a billion different ways. Personally I am using PASETO tokens and /login and /register routes with simply {username, password} as payload with the appropriate HTTP status codes as response. But there are a lot of other ways (http://www.passportjs.org/packages/). anyway, this scheme could be vulnerable to CSRF family of attacks. You need secure, same-site etc. cookie. Every other client side token, visible to JS is a potential vector of attack. If it is a blog for cats stories I wouldnt worry of course, but if it is a blog for bank official statements - this is another story. Do you know who your target is? Well, the words are cheap and misleading. We, as developers has a opportunity and privilege to talk precisely and exactly about topic - we can use the language of code. So, please just create a repo on github, put your words into action and just create a skeleton, template, base of your thoughts in material (as in computers haha) form. It is much easier to discuss code in specific context than just dream about any possible or maybe possible context. At the end of the day, you will need to make a technical decision.

@apg I have done this a few times make sure you have plenty time on your hand and forget weekends : )) If you are looking to build an editor which is not based on a model just uses a string as the model Quasar Editor is like that. There are all sort of difficulty with this though you will see … a good read here https://ckeditor.com/blog/ContentEditable-The-Good-the-Bad-and-the-Ugly/ Yes you could roll your own just like they did. It is under 500 lines of code https://github.com/quasarframework/quasar/blob/dev/ui/src/components/editor/QEditor.js TipTap is built on ProseMirror as you have mentioned. Now this is a model based approach. So is Quill but an older more cumbersome thing IMO. TinyMCE 5 is also similar approach. TinyMCE 5 does not support custom html ! https://github.com/ckeditor/ckeditor5/issues/5566 In these sorts of editors the content is not just a string. You will not be able to manipulate the dom. Everything must fit a predefined schema. If you are thinking TipTap or Quasar TipTap you would be essentially learning ProseMirror. Without a strong ProseMirror knowledge you will not be able to do much. TipTap is full of good examples of how to use ProseMirror but it is not a complete job IMO. Back in February ProseMirror was supported and the author replies to almost everyone (if not everyone) on the forum. He does not go into great deal of detail mind : )) So often you will be left to your own and you will have to wrap your head around the whole concept which is not easy to understand. It wasn’t for me anyway … Good luck with it.

Pycharm, here.

In my case, I use it to create custom QDdialog and inject them through the Dialog plugin. The idea is to have a standard design with an icon + title, some action buttons, and the content. I changed the ProductDialog to something out of my own scope because it’ll be too complex for an example. The base dialog <script> export default { props: ['name'], data: () => ({ config: { title: '', position: 'standard', translateTitle: true, cssClass: 'custom-dialog', icon: 'fas fa-exclamation-triangle' } }), methods: { // following method is REQUIRED // (don't change its name --> "show") show () { this.$refs.dialog.show() }, // following method is REQUIRED // (don't change its name --> "hide") hide () { this.$refs.dialog.hide() }, onDialogHide () { // required to be emitted // when QDialog emits "hide" event this.$emit('hide') }, onOKClick () { // on OK, it is REQUIRED to // emit "ok" event (with optional payload) // before hiding the QDialog this.$emit('ok') // or with payload: this.$emit('ok', { ... }) // then hiding dialog this.hide() }, onCancelClick () { // we just need to hide dialog this.hide() } } } </script> <style> .custom-dialog { width: 600px; } </style> The dialog template: q-dialog(ref="dialog" @hide="onDialogHide" :persistent="true" :position="config.position") q-card(:class="config.cssClass") block wrapper block title q-card-section.row.items-center.text-h4 q-icon(:name="config.icon").q-mr-md .text-capitalize {{ config.translateTitle ? $t(config.title) : config.title}} q-space q-icon(@click="onCancelClick" name="fas fa-times").cursor-pointer.q-ml-md block separator q-separator(inset) q-card-section(:horizontal="config.horizontal") block content q-card-actions.justify-end block actions q-btn(color="primary" flat :label="$t('application.actions.cancel')" @click="onCancelClick") q-btn(color="primary" :text-color="$theme.colors.primaryText" :label="$t('application.actions.save')" @click="onOKClick") The my dialog implement: <template lang="pug"> extends ../../UI/Dialog/DialogBase block content q-card-section.col-4 .text-body2 {{ $t('application.product.list') }} q-scroll-area(style="height: 700px;") q-list.q-mt-md q-item(v-for="product in products" :key="product.id" dense) q-item-section(side) q-btn(flat round icon="fas fa-times" @click="remove(product)") q-item-section(side) q-btn(flat round icon="fas fa-edit" @click="edit(product)") q-separator(vertical) q-card-section.col .text-body2.q-mb-sm {{ $t('application.product.info') }} .row.q-gutter-none q-editor(v-model="product.description") block actions q-btn(color="primary" flat :label="$t('application.actions.reset')" @click="reset") q-btn(color="primary" :text-color="$theme.colors.primaryText" :label="$t('application.actions.save')" @click="save") </template> <script> import DialogBase from '../../UI/Dialog/DialogBase' export default { name: 'ProductManagerDialog', extends: DialogBase, data: () => ({ config: { title: 'application.product.manager.title', cssClass: 'project-product-manager', icon: 'fas fa-calendar-alt', horizontal: true }, products: [] product: null }), methods: { edit (product) { this.product = product }, async remove (product) { // remove product from products and save to the backend } }, async mounted () { this.products = await ProductService.list() } } </script> <style> .project-product-manager { min-width: 1100px; } </style>

If I understand you correctly, you can set the value of your select by setting the initial value of your select’s v-model. Scott

I’ve solved the issue, sort-of. The following what I had to do: <!-- Outer qbar (or div) class is ROW / Inner item class is COL or COL-AUTO --> <q-bar class="row"> <q-btn dense flat stretch class="col-auto" icon="menu_open" /> <q-separator vertical /> <q-tabs v-model="tab" no-caps dense inline-label align="left" class="col"> <q-tab v-for="(n, index) in 12" name="mails" icon="mail" label="Candidate" /> </q-tabs> <q-separator vertical /> <q-btn dense flat stretch class="col-auto" icon="menu_open" /> </q-bar>