Meteor-Quasar starter kit questions



  • I am trying to leverage the great help that the Meteor-Quasar starter kit provides to assess the practical usability of the Meteor-Vue-Quasar tech stack to develop apps. But as a Vue and Quasar noob, I am struggling to understand parts of it in spite of the nice comments that it contains.

    1. Line 34 of the template/client/main.js file
      render: h => h(AppLayout)

    what is this h that I cannot easily find referenced anywhere else and what does it do? Is it a function? Where does it come from? I am guessing that it somehow injects the AppLayout component inside the root app component that is being created by the New Vue expression that starts on line 32 but I don’t understand the syntax.

    Another related questions is:
    why create the top-level app component as JavaScript code of a Meteor.startup function that injects the AppLayout component using a render function in this root component instead of, say, adding an App.vue component in the template/imports/ui/ folder that would look something like:
    <template name=“app”>
    <app-Layout></app-Layout>
    </template>

    <script>
    // put the router instance creation code here instead of in the Meteor.startup //function
    <script>

    Would such declarative approach also work? If not why?

    1. There is a NotFound.vue component in the templates/imports/ui/ folder but I do not find any route to it

    2. I still do not understand why the folder into which to put the Meteor app code and run it (to avoid interference between the meteor build system which does not use webpack and the Quasar build system that does) needs to be called “template”. Is this a reserved Quasar word? If so where is the doc explaining it. I assume it has nothing to do with the “template” Vue reserved word to use as tag surrounding Vue’s html generation template code in the single file Vue components, but if it is the case, it is a confusing choice by overloading the same word “template” with two distinct meanings



  • @damiendeville I found answer to the first question here: https://github.com/vuejs-templates/webpack-simple/issues/29
    In short, this mysterious h is an alias for the createElement Vue function that creates a new node in the DOM. It apparently is an compulsory argument to the render lambda that the render option of a Vue instance is expected as value (why it needs to be passed as argument instead of just called inside the render lambda I still don’t get it)

    So
    h => h(AppLayout)
    is just an abbrevation for
    createElement => createElement(AppLayout)

    Now if you want to stay at the highest possible level of abstraction and hence would like to avoid using render functions, you can substitute the option:
    render: h =>h(AppLayout)
    by the two options:
    template: '<app-layout/>'
    components: { AppLayout }

    BUT, this will only work if you import the development versions of Vue and VueRouter that include the template compiler instead of the production versions that exclude it and thus require the use of a render function.

    Hence your imports:
    import Vue from 'vue’
    import VueRouter from ‘vue-router’

    must be replaced by:
    import Vue from '/node_modules/vue/dist/vue.common.js’
    import VueRouter from ‘/node_modules/vue-router/dist/vue-router.common.js’



  • @damiendeville Now the fact that the Meteor app code must be placed below a template folder is problematic with correctly setting up the launch.json file to simultaneously debug the client and server code in VSCode.

    Having added the launch.json file found here: https://github.com/Microsoft/vscode-recipes/tree/master/meteor,
    when launching a debugging run with VSCode, I get an error with the following complaint:
    no package.json file found in <workspaceFolder>.

    Since the package.json is in fact in <workspaceFolder>/template due to the installation of meteor inside this subfolder
    I have tried to change the option:
    “webRoot”: "${workspaceFolder}"
    to
    "webRoot": “${workspaceFolder}/template”

    Then I tried to move the package.json file to <WorkspacePath> but it broke my meteor app build.

    Could anyone using this VSCode recipe for Meteor help figure out how to alter it so that it manages to find the package.json file below the template folder?