single js/css file for the whole framework?

[gkatz]

hi guys;
I was wondering. can I get a single JS/CSS file for the whole framework?
I am using vue (also as a single file) and do not use any CLI/webpack/other stuff (do not feel comfortable enough with them).
I just like to start as simple as I can. I currently do not care about which theme i use or other stuff.
how get I get my hand on a single js/css that I can include in my index page header and start working. I couldnt find a CDN that hosts this product. but is it possible to build one? or extract one from a boilerplate project?
thanks in advance!

[JCharante]

I’d take a look at this thread as it’s been requested before.

I am using vue (also as a single file) and do not use any CLI/webpack/other stuff (do not feel comfortable enough with them).

Not being comfortable enough with webpack & other node tools of the month is what drove me to Vue.js, but I really like how the Quasar CLI held my hand so much at the start that I’d recommend giving it a try.

[gkatz]

thanks @JCharante , i know exactly what you mean, but I’d still like to know if I can get a whole JS/CSS file to simply include in my index page…
can anyone answer?
thanks.

[a47ae]

You can clone Quasar by running git clone git@github.com:quasarframework/quasar.git and then run npm install from inside the directory. Next to build the files run npm run build. This will produce a folder called dist, which should now hold all the build files. The files you are looking for should be

• dist/quasar.mat.standalone.css or dist/quasar.ios.standalone.css
• dist/quasar.standalone.js
  or their minified versions.

But when using Quasar v0.14 (dev branch) the build command not longer outputs a standalone build, but only JS that uses pure ES6, which is likley not understandable by your browser.

[gkatz]

@a47ae said in single js/css file for the whole framework?:

You can clone Quasar by running git clone git@github.com:quasarframework/quasar.git and then run npm install from inside the directory. Next to build the files run npm run build. This will produce a folder called dist, which should now hold all the build files. The files you are looking for should be

• dist/quasar.mat.standalone.css or dist/quasar.ios.standalone.css
• dist/quasar.standalone.js
  or their minified versions.

But when using Quasar v0.14 (dev branch) the build command not longer outputs a standalone build, but only JS that uses pure ES6, which is likley not understandable by your browser.

Thanks a lot for the help.i will def try. So in 14 it will not work cause it’s a dev branch? Or cause something changed on purpose along the way.
Reading the thread suggested above it seems like this is something the author is going to support formally but I am. It sure
Thanks!

[a47ae]

I think @rstoenescu changed the build system in v0.14 and decided to not longer generate a standalone build, but maybe it will be included back once v0.14 is finished.

[gkatz]

@a47ae said in single js/css file for the whole framework?:

I think @rstoenescu changed the build system in v0.14 and decided to not longer generate a standalone build, but maybe it will be included back once v0.14 is finished.

thanks a lot for the answer…
I really do hope this will stay intact for future versions

[gkatz]

@a47ae said in single js/css file for the whole framework?:

You can clone Quasar by running git clone git@github.com:quasarframework/quasar.git and then run npm install from inside the directory. Next to build the files run npm run build. This will produce a folder called dist, which should now hold all the build files. The files you are looking for should be

• dist/quasar.mat.standalone.css or dist/quasar.ios.standalone.css
• dist/quasar.standalone.js
  or their minified versions.

Hi;
including quasar standalone yields errors upon loading.this is the console output:

quasar.standalone.js:12 Uncaught TypeError: Cannot use ‘in’ operator to search for ‘default’ in undefined
at quasar.standalone.js:12
at moment (quasar.standalone.js:9)
at quasar.standalone.js:10

this built version is for quasar 0.13.10.
the dist dir includes 3 js files: quasar-common, quasar-es6 and quasar standalone. I included only the standalone one.
any suggestions would be great! thanks!
BTW, instead of cloning git I did:

$ quasar init <folder name>
$ cd <folder name>
$ npm install

and took the files from dist…
i’m kind of in the dark here. any help would be great.

[gkatz]

am I really the only guy here who would like this? or trying to use quasar this way?
any help would be greatly appreciated

[spectrolite]

I think your use case is not really crystal clear, so it’s hard to help.
It seems to me that you’re complicating something simple, for the sake of simplicity…
Why don’t you want to use the full quasar ?
If you try 0.14, you’ll notice it’s been nicely modularized, so it will not weigh much if you do not use much.

[gkatz]

@spectrolite said in single js/css file for the whole framework?:

Why don’t you want to use the full quasar ?

thanks for the answer, i am basically not comfortable with webpack (yet) and with all its accompanied tools (such as bundles, minifiers etc). also, as a starting point, its always easier to include two files (css & js) in my index and start working…
I am willing to sacrifice size here and use all of quasar, I am usually bundling and minifying my code using tools like ANT (java), I also do not need any dev servers (I use apache tomcat). so for me, all the extra stuff is plain overhead.
thanks in advance.

[spectrolite]

What I’m trying to convey here is that Quasar does all the heavy-lifting for you.
You have absolutely no need to mess around with webpack or the dev server. Everything is already optimally set up for you, and Razvan made sure it will work seamlessly whatever your destination platform.
ES6 transpiling, Bundling, chunking, tree-shaking, minification : all come ready for you out of the box.
You can then choose to use or not the lazy-loading mechanics.
The only constraint in 0.14 is that you choose and follow a component declaration process (global or local), which is there to enable the tree-shaking mechanics.

[gkatz]

@spectrolite your responses are greatly appreciated.
one question though, don’t you think that for first time quasar users that are mostly JS beginners-intermediates its better to have a simple environment where they do not have to use cli or even have so many folders and files from the start (even if they do not need to touch them)?
I would argue that having a simple js & css as a starter kit that you can use in codepen would bring more people aboard. I am sure many people are “scared off” when first trying to use quasar and eventually revert to other more “friendly” options (vuetify, vue material, etc) which is a shame as I think quasar is awesome.
just my opinion…

[spectrolite]

I tend to agree with you on principle. We truly need a super-easy, ultra-simplistic tutorial, that would just get you started doing a single simple webpage. Something like a beginner’s tool to learning Vue and Quasar. That would really widen the audience.
Btw you only need quasar-cli to initialize the project, you can mostly forget about it later, except for quasar dev and quasar build, which are happy alternatives to npm run build whateveroptionsIcanNeverRemember

On the other side, I doubt so many people are scared off right now. Quite the contrary. Quasar is still quite niche, and it seems most people come to it after being scared off or disgusted by angular/react or whatever bloated and uselessly complex framework that did not satisfy their needs / code philosophy / UI requirements / destination platforms requirements / etc. And from what I can see, some pretty picky people are pretty happy with it.

[JCharante]

most people come to it after being scared off or disgusted by angular/react or whatever bloated and uselessly complex framework

That’s exactly what drove me to use Vue instead of React as I didn’t want to change my workflow for a library. I guess Quasar was just that good, and it was easy to get started due to the cli. It does seem strange how Quasar isn’t “drop in a <script src=…> tag and use” like vue is, and a codepen showing off the components would be neat, but it’s just not that difficult to install the quasar-cli and init a project to check it out. The beginner/quickstart documentation does need some love though.

[spectrolite]

@JCharante I had that same path, and when I got to Vue and realized the UI was totally up to me, I started gathering components to make my own UI framework. At the Nth google search for a missing UI element, I stumbled upon Quasar. I have now deleted my messy bootstrap UI library from my working repo and never looked back since. And now I have the peace of mind of knowing that most of what I code for the web today will seamlessly work across all platform combos (native/web + desktop/mobile + touch/mouse, etc).
IMHO Quasar is the long missing link between Vue and the user’s display (whatever the device).

[spectrolite]

@rstoenescu this topic is starting to accumulate interesting ideas and potential quotes for Quasar’s marketing. /wink

[benoitranque]

Webpack is intimidating. I ran off when I first installed the vue-webpack template. But most things you do not actually need to understand.

You only need the src folder.

That’s right. Just the src folder. Forget about everything else

Now you know that, go on and play! (it helps if you know your way around the basics of vue)

[gkatz]

thanks for all the responses.
as I am new here, I am not sure if some of you are forum moderators/contributors of quasar or not.
of course, I was talking from my experience only, I still believe a starter codepen example would be super helpful and when the time comes, one can progress to the more complicated stuff.
I know my way around vue (this is how I came to quasar) and feel very comfortable with it.what I did until now for UI is mostly using vue templates to “spit out” semantic UI components (semantic UI the framework). so its not that I was considering react/angular at all. I bumped into quasar searching for a UI component framework for Vue and like I said, the lack of an easy to use start is intimidating to me…
thanks again, and hopefully someone will pick this thread up and think its worth investing a little time to implement this idea.

[a47ae]

I think the reason why there is no drop in snippet for Quasar at the moment is that Quasar is mostly focusing on single page applications, which are by their nature more complex than just using Vue for some small stuff.
And as @spectrolite said you’re making yourself a hard time, by not using single file components and webpack, because your application will become hard to maintain. Keep in mind that Quasar is marketed as a framework and not as a UI library.

I can really recommend this free video by Jeffrey Way to get comfortable with webpack (Also the rest of this free series is also a great learning resource ). But if you use the Quasar template you basically do not have to worry about webpack at all, because it is all configured out of the box for you.

1. You just need to install node and then run npm install -g quasar-cli from within your terminal to get the quasar-cli tools installed.
2. Then you run quasar init my-awesome project to create a new project
3. From within the project folder you run npm install to install al depedencies
4. Finally, run npm run dev this will kick of webpack and once it’s finished automatically open up a browser with your new awesome project

On the other hand, including Quasar quickly into things like JSBin would be really cool to showcase things. It would be also really helpful for issuing bugs because you can provide a small working example of your problem without spinning up a whole repo and project.