[Request] Standalone build and CDN integration

a47ae commented 7 years ago

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

rstoenescu commented 6 years ago

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

olegvakulenko commented 6 years ago

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!

SeregPie commented 6 years ago

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});

olegvakulenko commented 6 years ago

@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');

Masanix commented 6 years ago

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

olegvakulenko commented 6 years ago

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

SeregPie commented 6 years ago

Hello Masanix.

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

Masanix commented 6 years ago

Hi!

Work perfect!

Thanks a lot for your support.

mburke05 commented 6 years ago

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.

extend1994 commented 6 years ago

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 :)

rstoenescu commented 6 years ago

Hi all,

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

natxocc commented 6 years ago

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?

mesaglam commented 6 years ago

We strongly need a standalone version like vuetify...

rstoenescu commented 6 years ago

It's coming. Please be patient.

mesaglam commented 6 years ago

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

rstoenescu commented 6 years ago

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

mame82 commented 6 years ago

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?

olegvakulenko commented 6 years ago

@mame82

https://quasar-framework.org/guide/embedding-quasar.html https://unpkg.com/quasar-framework@0.17.9/dist/umd/

mame82 commented 6 years ago

Thanks!

quasarframework / quasar

[Request] Standalone build and CDN integration #778