Hi,

I stumbled upon this great thread yesterday after googling for “meteor vue quasar”.

The example quasar/vue/meteor app in https://github.com/quasarframework/quasar-template-meteor seems like a great starting point for a noob like me trying to evaluate the potential of this QVM stack with single file Vue components.

However, it raised the following questions concerning this QVM app structure and that recommended in the Quasar doc.

Let’s start the quasar-meteor template app structure:

1. Why are the routing code split into a
   client/main.route.js file and a
   imports/route.js file
   instead of being in a single
   imports/startup/client/route.js file
   as in the meteor guide app structure?

2. Why is there a client/main.css file
   instead of an app.variables.styl file
   that could perhaps be put in
   an imports/ui/theme folder
   or in an import/ui/layout/theme folder to follow the meteor guide app structure?

3. Why is there an empty imports/startup/client/index.js file whereas the client startup code is put in the client/main.js file?

Now concerning the quasar app structure, why having a separate
src/themes/app.variable.styl file
instead of putting the stylus customization code inside a
<style lang=stylus><style> tag in the
src/App.vue root component to follow the single file Vue component philosophy?

Thank you very much in advance!

@damiendeville Partial self-answer here. I almost managed to customize the q-input component styling to my local needs with the following code:

<style lang="stylus">
.q-input
  height 2.5em

.q-if-label
  text-align right
  color orangeRed

input[type="number"]
  height 1em
  color purple
  text-align right 
</style>

However, I still do not understand why I needed to add the [type=“number”] to the input selector to access the input element inside the q-input element.

But this code is not really legible, since neither the q-if-label component nor the input elements encapsulated in the q-input element appear in the vue template that this stylus code is styling. Is there any way to customize the appearance of a quasar component other than selecting in stylus sub-components and sub-elements internal to the component hence in effect breaking its encapsulation and making the code incomprehensible without inspecting the component 's internal DOM with a browser debugger?

Also, I tried to add an ellipsis to the placeholder and the following code just didn’t have any effect:

input[placeholder]
  text-overflow ellipsis

Any suggestion on this one?

Noob here trying to apply some CSS to the <input> element inside a
<q-input> element.

By adding:

<style lang="stylus" scoped>
input
  text-align right
  height 32px
  color purple
</style>

to the element containing the <q-input> element, I manage to move the entered input text to the right. But it does not alter neither the color of the input value nor the height of the input field to accommodate for the large font size inherited from the parent component without cropping it.

What I am doing wrong?

And also what is this sp unit used in the typography section of the Quasar doc? I don’t find it the w3school CSS reference

@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?

@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’

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

@mwarren2 said in Meteor!:

@damiendeville said in Meteor!:

Do you mean that this ‘template’ is needed only because running the meteor CLI in the application root folder would somewhat not work? But why? Since you did not use the quasar CLI nor webpack, what is the problem? Also is the name ‘template’ arbitrary?
Could it be called ‘foo’ or ‘meteor’ and it would still work properly?

It has to be called ‘template’. That’s all I know.

@rstoenescu perhaps you could explain?

@mwarren2 said in Meteor!:

I was asked to add the root ‘template’ folder by quasar’s creator - presumably one day it would be good if it fitted into the quasar starter-kit system, but at the moment I don’t think this is possible - maybe one day when Meteor can simply be installed from npm, if that happens.
For the moment you should simply ignore the template folder and change directory into it and run the usual meteor commands from there.

Do you mean that this ‘template’ is needed only because running the meteor CLI in the application root folder would somewhat not work? But why? Since you did not use the quasar CLI nor webpack, what is the problem? Also is the name ‘template’ arbitrary?
Could it be called ‘foo’ or ‘meteor’ and it would still work properly?

I also do not understand the need for transpiling. You say:
Then here we transpile two es6 .js files (one for ios, one for material design) to commonjs which meteor needs
What are those files to transpile, where are they located in your project and you are talking about transpiled from what source langage to what langage? I thought Meteor was written in and supporting es6.

Thanks again for further clarifications

@mwarren2 said in Meteor!:

I decided not to use quasar-cli because it involves using webpack, which meteor avoids using completely, because webpack is rather complicated.

That, I think, is the real difference.

Actually I am getting confused concerning whether or not you are using quasar-cli because:

1. your starter kit contains .vue files and the quasar doc [http://quasar-framework.org/guide/index.html](link url) states that without using the quasar-cli one cannot use such files
   Here’s a comparison:
   Feature UMD Starter Kit
   SFC (Single File Component - for Vue) - Yes

2. In your own starter kit page you say:
   The ‘template’ folder is necessary for the quasar cli command to function. This extra ‘template’ folder is there because quasar-framework requires it.
   But if you don’t use the quasar cli, why is the template folder needed then? Especially given that neither the recommended Meteor app structure [https://guide.meteor.com/structure.html#javascript-structure](link url)
   nor the recommended Quasar app structure [http://quasar-framework.org/guide/app-directory-structure.html](link url) contains any folder named ‘template’.

Thanks in advance for rescuing me from my current confusion :).

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?

I see. I found alexandesigner’s mentionned in the following discussion thread: http://forum.quasar-framework.org/topic/815/quasar-v0-15-roadmap/38

In the exchange below, @rstoenescu advised alexandesigner to get in touch with you. SO I assumed (wrongly apparently) that he did.

alexandesigner 5 months ago
@rstoenescu Amazing!! let me help with the meteor starter kit … Give it a try https://github.com/alexandesigner/quasar-meteor @theara
I uses meteor-client-bundler, the base of the quasar to develop and for production using webpack, the meteor say it more like an API database in websocket, I did not add tests, anyway it’s already a path, please help me to improve if you have any idea or tip … open an issue or send a PR, maybe this is a clean integration without changing the structure much…

reply quote 1
rstoenescu ADMIN 5 months ago
@alexandesigner Hi, This is the true amazing thing. People wanting to contribute. Please contact @mwarren2 and sync with him as he is the “big daddy” in Meteor integration. Thank you!

reply quote 0
alexandesigner 5 months ago
Perfect … thanks @rstoenescu and @mwarren2 how can I help? I think we can have two ways of integrating with the Meteor … one is using the Quasar base with Webpack and the other is integrating directly into the Meteor + Isobuild base maybe creating a package for distribution … this repository covers the first form, if the will to guide me to do the right thing…