Quasar: [Request] Standalone build and CDN integration

Created on 7 Aug 2017 · 19Comments · Source: quasarframework/quasar

At the moment Quasar v0.14 does not have a standalone build, but in my opinion, this would be a very useful feature to have. Of course, it is not recommended to pull in Quasar without using a build system for production ready sites, but a standalone build would really help debugging issues.

If we would have a standalone build which is uploaded to a common CDN, Quasar could be included into sites like JSBin. This would allow users to provide minimal working examples of their issues or solutions to a problem, without setting up a whole new project. It would also be great for showcasing things like Vue does it in their documentation.

Relevant Forum discussion: http://forum.quasar-framework.org/topic/581/single-js-css-file-for-the-whole-framework/20

Source

a47ae

👍15 🎉2

Most helpful comment

Hi all,

Please be patient for v0.15 release. This will be the first version officially supporting a standalone build.

rstoenescu on 15 Dec 2017

👍8

All 19 comments

99% done and will be available in future v0.15.

rstoenescu on 20 Oct 2017

👍4 🎉3

Could you tell me please

when standalone version of Quasar framework will be approximately (week, month) available for download and usage?
is exist a way to build this files (js & css) automatically from current version by myself?

After my experiments I could manually edit _quasar.esm.js_ as that was in v13 and run simple app, but my knowledge of JS and Quasar does not allow to register components in Vue.

Thanks!

olegvakulenko on 9 Nov 2017

To make a standalone build, edit the file /build/script.build.javascript.js.

build([
  {
    input: resolve('src/index.esm.js'),
    output: resolve('dist/quasar.esm.js'),
    format: 'es'
  },
  {
    input: resolve('src/ie-compat/ie.js'),
    output: resolve('dist/quasar.ie.js'),
    format: 'es'
  },
  {
    input: resolve('src/index.esm.js'),
    output: resolve('dist/quasar.standalone.js'),
    format: 'umd'
  },
].map(genConfig))

Then run npm run build from the parent folder.

In /dist you will have the files quasar.standalone.js, quasar.mat.css and quasar.ios.css, which you can use directly in the browser.

In your page you need to register the components. Just include this code between <script> tags.

Vue.use(Quasar.default, {components: Quasar, directives: Quasar});

SeregPie on 9 Nov 2017

👍3

@SeregPie
Thanks! Work perfect!

Maybe, it could be useful for others framework users, who want use Quasar standalone without npm.
To change theme just do follow steps in backend:

In <head> add <link href="quasar.ios.css" rel="stylesheet"> or <link href="quasar.mat.css" rel="stylesheet">;
In <script> before new Vue ({ el: '#q-app', ... }); add Quasar['default'].theme.set('ios'); or Quasar['default'].theme.set('mat');

olegvakulenko on 9 Nov 2017

👍1

Hello,
Thanks SeregPie for your answer.

As I am new I do not know steps to get the /build/script.build.javascript.js file.

I have followed steps in _Getting Started_ but I found only _script.build.js_ .

ANy help on this it is highly appreciated.

Thanks in advance

Masanix on 19 Nov 2017

@Masanix
Hi!
If you want to build standalone version do this:

Download release from GitHub and put files in new folder.
Run npm install in this folder.
Edit /build/script.build.javascript.js and add 'umd' section.
Run npm run build from same folder.

olegvakulenko on 19 Nov 2017

👍1

Hello Masanix.

Download the latest release here. There is a file /build/script.build.javascript.js.

SeregPie on 19 Nov 2017

👍2

Hi!

Work perfect!

Thanks a lot for your support.

Masanix on 19 Nov 2017

I followed the steps above and received "Error: Could not resolve '.QSpinner' from src\components\spinner\index.js'". I can provide the full error and context if anybody else has the issue.

mburke05 on 3 Dec 2017

Hi I am adding this library to cdnjs. Here is the process.
However, I met some trouble.
First, cdnjs needs library's official built files. But after v0.13 of npm pacakge, there is no quasar.standalone.js;

Second, anyone meets the error when using quasar.standalone.js in browser?

quasar.standalone.js:12 Uncaught TypeError: Cannot use 'in' operator to search for 'default' in undefined
    at quasar.standalone.js:12
    at quasar.standalone.js:9
    at quasar.standalone.js:9

Any kind of help would be good :)

extend1994 on 15 Dec 2017

Hi all,

Please be patient for v0.15 release. This will be the first version officially supporting a standalone build.

rstoenescu on 15 Dec 2017

👍8

Hi. Using standalone version have a problem. Using Tabs component, only first tab is shown, the rest are hidden. Using the same in webpack all is correct. Something missing probably when setup a standalone version?

natxocc on 26 Dec 2017

We strongly need a standalone version like vuetify...

mesaglam on 9 Jan 2018

It's coming. Please be patient.

rstoenescu on 9 Jan 2018

I'll be a backer then! :+1:

mesaglam on 9 Jan 2018

👍1

@mesaglam Here's a very very early alpha version of UMD starter kit: vue init quasarframework/quasar-starter-kit-umd <folder>

rstoenescu on 9 Jan 2018

👍2

Hi,

I'm working on a web-frontend for my project "P4wnP1". The frontend is completly written in gopherjs and compiled to a single js file (there's no webpack involved). I'm using Vue.js bindings for gopherjs and my own custom Vuex bindings, to bring Vue into reactivity into the game.
Although I'm not really a web developer, I quickly noticed that manual writing and styling basic components is too time consuming and optimizing them for cross-browser consistency is nearly impossible.
At this point I stumpled across quasar, which seemed to be the solution. But after a second look, I noticed there isn't a simple way to include quasar as stand-alone build into my existing project.

Here's a quick video demo of what I'm currently working on (everything else is still in a private repo)
https://youtu.be/L28qOLNHkl4

I have special requirements:

external libraries have to be hosted on my customized device, as it works without internet connection
there's no node/npm environment
I can't recreate the frontend code, as it got already really complex (gRPC-web communication system to backend)
I'm able to include third party JS libraries and CSS files

So my questions after reading this isdue thread are:
Could I use Quasar in my scenario?
If yes: How to get a stand-alone version?