Is there a demo example app following recommended directory structure?



  • As a newbie coming from Meteor I am a bit lost.
    Is there a demo example app somewhere that follows the recommended directory structure?
    Something like the classic todo list app example?
    That would really help newcomers onboarding.

    One thing that is confusing to me is that I was expecting the Quasar framework to be made of single file vue components with extension .vue, but in the source code below quasar/src/components I can only find .js and . styl files. So where are all the quasar template tags prefixed with q defined?



  • The Quasar demo app, presented in the docs, is located here. It’s supposed to be a comprehensive showcase of all Quasar components, not a demo like TodoMVC, though.

    Answering your other question: the components are defined in the JS files themselves. But, instead of using <template> tags, it uses render functions (see Vue docs about render functions).



  • I have downloaded the quasar-play demo app from GitHub (https://github.com/quasarframework/quasar-play) through GitHub desktop. It sits now in a local folder \GitHub\quasar-play on my machine. I’m able to open that in VS Code. It shows all the usual files necessary for a Quasar app, but I guess it is missing the Quasar stuff (node_modules) to run it.

    So I tried a “quasar create quasar-play” from the folder above \quasar-play. I picked “Standard” for the ESLint preset parameter (not sure whether that matters).
    At the end of the quasar create, it however reports all kinds of ESLint related errors for vue components of this demo app (transition.vue, table-features.vue, and others).

    Examples for those ESLint related errors:
    error ‘props’ is defined but never used vue/no-unused-vars (lots of those errors)
    error Expected to return a value in “tableClass” computed property vue/return-in-computed-property
    error This ‘v-if’ should be moved to the wrapper element vue/no-use-v-if-with-v-for

    How do I get rid of these errors? I assume this demo app should build without changes in its code…advise needed! Is there an alternative way to run it? Thanks.



  • I followed instructions on https://quasar.dev/start/vs-code-configuration and changed my VS Code Settings to the Prettier settings listed there (I had Prettier and Ventur already installed). And I changed the ESLint preset in the quasar create to “Prettier”.

    I still get similar, now even more ESLint errors after the step "eslint --ext .js,.vue src “–fix” in the quasar create.
    Now even additional ones like:
    C:\Users\admin\GitHub\quasar-play\src\store\index.js
    17:26 error ‘module’ is not defined no-undef
    18:5 error ‘module’ is not defined no-undef
    19:27 error ‘require’ is not defined no-undef
    22:5 error ‘module’ is not defined no-undef
    23:29 error ‘require’ is not defined no-undef

    Help would be needed to get rid of those ESLint errors, now even following the official recommendations. The quasar-play project on GitHub is archived, so I can’t open an issue there. Is there another option to run the quasar-play app?


Log in to reply