UMD/Standalone version

[ontwikkelfabriek]

Are there plans for a UMD/Standalone version of Wave UI?

[antoniandre]

Hi @ontwikkelfabriek, If that's what you mean, Wave UI can be served via a CDN like https://unpkg.com/wave-ui@next for instance, wich delivers a UMD minified file. You can use it just like in this Codepen example https://codepen.io/antoniandre/pen/RwaXMLd?editors=1010 or in a script tag.

If that's not what you meant, let me know!

[ontwikkelfabriek]

@antoniandre What I mean is that you can use Wave UI components outside of Wave UI framework, so you can use it in your existing websites/projects, Like you can do with Quasar: https://quasar.dev/start/umd

[antoniandre]

Hi @ontwikkelfabriek, The UMD JavaScript file is available and it include all the framework UI components like Quasar does here: https://quasar.dev/start/umd.

What Quasar also give as choices for the user, are:

• to embed an optional font, and icons set.
• some options like minifying the output, or changing the browser support level

Wave UI is already capable to plug & play Fonts and Icons, but there will not be a preselector to bundle in 1 single file as Quasar does. The user is free to manage their external resources on their side, outside of Wave UI. :)

Wave UI does not support IE11, and is already transpiled for all other browsers, even if internally using latest ES6+ features. So no problem on this aspect neither.

If you are going to use Wave UI via script tag, there is no purpose for unminified file, so the output it is already minified and you don't have to worry about performance.

Wave UI's philosophy is to have no dependency and let the user add whatever they want on top separately, so that it does not penalize other users which won't use a dependency. In that matter, icons, fonts, animate.css lib, are all external and should be managed by the user up to taste! :)

Hope it makes sense, please close the issue if it does!

[antoniandre]

@ontwikkelfabriek, Also, just to clarify, if you want to use quickly in your project with a <script> tag this is completely possible! you can either point to this URL: https://unpkg.com/wave-ui@next (Vue 3) or this URL https://unpkg.com/wave-ui (Vue 2), or repatriate the script on your server by copying it from the same URL. This URL always serves the latest Wave UI :)

Example:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/wave-ui"></script>

Then you just need to wrap your app in a w-app like the rest of the documentation.

Since this is not mentioned in the documentation but also possible, I will update the getting started page to add a comment about that!

Hope it helps.

[ontwikkelfabriek]

@antoniandre But how do I use Wave UI components standalone in an existing Vue app ( for example a Quasar SPA app)?

Then you just need to wrap your app in a w-app like the rest of the documentation.

This existing app does not have a div with w-app

[antoniandre]

Hi @ontwikkelfabriek, the w-app is needed for styles, some JS logic and as a reference DOM element when mounting dynamic vnodes in DOM. So it is required for Wave UI to work. But since the w-app tag is converted to a div it shouldn't be a problem to use it. :)

[antoniandre]

Closing due to inactivity. Please reopen if not solved.