Vue 3 support

[mesqueeb]

I have released the official Vue 3 Blitzar! 🎉

• See new docs:
  https://blitzar.cycraft.co/

--

• double check wether or not the documentation of blitzar covers all use cases & features for the Vue 2 version
• recreate the documentation in Vite + Vue 3 with all the markdown content ready.
• start implementing all the examples of the docs one by one.
  • completely rewrite BlitzForm, BlitzTable, BlitzListForm based on this rewrite
  • keep an ongoing list of breaking changes

--
Breaking Changes For Blitzar + Vue 3

BlitzTable

BlitzTable was completely rewritten and has changed a lot.

• Please check out the new documentation on BlitzTable and adjust accordingly.
• Some features are not yet re-implemented like conditional/dynamic styles & classes but they will be soon

BlitzForm

renamed terminology

• @input to @update:modelValue
  • reason: Vue 3 requirement
• @field-input to @updateField
  • reason: update-field makes sense with Vue 3 terminology (because Vue 3 doesn't rely on @input anymore)
• @input-cell to @updateCell
  • reason: same as above
• fieldInput (the function) to updateField
  • reason: same as above
• evaluatedProps to dynamicProps
  • reason: clarity — Dynamic Props is a bit easier to understand imo.
• mode: 'view' to mode: 'readonly'
  • reason: clarity — closer to HTML5 readonly attribute

upgrade strategy for the above:

• find and replace

Deprecated props

• deprecate rules validation array per field
  • reason: we do not use Quasar under the hood anymore, rules was only used because Quasar's QField uses it for Validation
  • I have thought a long time about the best way of implementing Validation, looking at VeeValidate, Vuelidate, Quasar, Vuetify and others, and have realised we already have a very simple implementation of form validation via Dynamic Props... So to reduce codebase complexity, I have added a new prop called error where you can simple pass a validation function much like the rules prop before. The difference is, it's a single function (to be marked as dynamicProps: ['error']) and you make it a single function that returns null if there's no error, or the error you want to display when there is one.
  • upgrade strategy: Read the new Documentation on Validation here. Please scroll to "validation" at the bottom

// before
{
  rules: [(val) => Number(val) > 18 || 'no minors allowed']
}
// after
{
  dynamicProps: ['error'],
  error: (val) => Number(val) > 18 ? null : 'no minors allowed'
}

• deprecate prop internalErrorsFor array of field-names

  • reason: reduce codebase complexity & delete less common options to reduce size
  • upgrade strategy: just add internalErrors: true to the fields you need this

• deprecate prop validator global validation function

  • reason: reduce codebase complexity & delete less common options to reduce size
  • upgrade strategy: just add error validation to each field in your schema instead

• deprecate mode: 'add'

  • reason: reduce complexity
  • upgrade strategy:
    • check if your forms rely on mode: 'add' by doing a global search for add
    • write custom logic to difference between mode: 'add' and mode: 'edit'

[Peter-Gabel]

Is there an estimate on when this might be available? Or, alternatively, any insight into what needs to be done to migrate to Vue 3?

[mesqueeb]

This is a great question!

Currently Blitzar uses QForm and QTable under the hood.
I plan to make the library way more Framework Agnostic by removing the dependencies on QForm and QTable.

I have nothing against QForm and QTable, but the issue is: using those as dependency introduces a lot of global CSS pollution in projects. So currently it's really annoying when using Blitzar in Non-Quasar projects...

Planned steps:

• Remove QForm dependency
• Remove QTable dependency

Upgrading to Vue3:

• If Quasar upgrades to Vue 3 before I remove the dependencies, I can make the upgrade to Vue 3 on beforehand.
• If I am able to remove the dependencies before Quasar upgrades to Vue 3, I can make the upgrade to Vue 3 myself.

[Peter-Gabel]

I do not mind the QForm and QTable dependencies; Quasar v2 beta appears to be very stable and I am using Quasar for my application. So my preference is for movement to Vue 3 first. I looked at the Blitzar code and thought that there would not be too many changes but I was not confident in my doing it myself.

[mesqueeb]

@Peter-Gabel the thing is, I rather wait until Quasar's official Vue 3 release.
If you want to help out and try using the current Quasar Vue 3 beta, you can help me out on a new branch. Do you want to try?
We can have a short zoom session if you'd like where I show you how to best do it if you're still new to contributing on Github.

[Peter-Gabel]

Yes. I'd love to get right on it but it will take me about a week to find the time in my schedule. If you could propose when might be convenient for you, I would be grateful for guidance including any insights that you could share about migrating the code to Vue 3. I'm still getting up to speed on Vue 3 - I keep dropping into Vue 2 idioms and then need to remind myself of the differences. I am in the eastern US time zone but can be very flexible.

[mesqueeb]

what's your discord tag?

[Am3ra]

@mesqueeb Seeing as quasar already updated to Vue3, is there any issue updating now?

[mesqueeb]

@Am3ra I will do my best to try to find the time to work on it!! Your support is much appreciated! : )

[mesqueeb]

ps: WIP on this branch
https://github.com/CyCraft/blitzar/tree/v1.0.0

[mesqueeb]

Finished BlitzForm and BlitzListForm.

Now working on BlitzTable. Looking at vue-dataset and vuejs-smart-table.

[FelipeVeiga]

I'm anxious to use in quasar v2, thanks from Brazil.

[WayneBuckhanan]

Loving what I'm seeing so far with Blitzar.
Looking forward to the updates to support the latest version of Quasar.

[mesqueeb]

Thanks guys. I will try to host the new docs and release beta version this week. BlitzForm and BlitzListForm are already done and usable in beta in Vue 3 projects.

[WayneBuckhanan]

Thanks, Luca. I'm using BlitzTable in a new Quasar project and had to drop back to v1 because this library is helpful enough to make it worth doing that. Personally, I'd rather see it working with QForm and QTables than wait for the non-Quasar refactoring.

[mesqueeb]

I was able to deploy the docs for Vue 3 here:
https://blitzar-next.web.app/blitz-form/

You can install the Vue 3 compatible BlitzForm by

npm i @blitzar/form@next

and use it according to the new docs.

Also check out the breaking changes documented in the first post of this thread.

---

I will continue to update here once I make progress hosting the new docs and also updates on the Vue 3 compatible BlitzTable.

[mesqueeb]

I was able to deploy the docs for Vue 3 here:
https://blitzar-next.web.app/blitz-form/

[mesqueeb]

@WaltiDev did you globally register CodeBlock?

[WaltiDev]

I think yes: My "quasar boot file" has filename "blitzar.js" and is located in the /src/boot/ folder.
_import { boot } from 'quasar/wrappers'
import { BlitzForm } from '@blitzar/form'

export default boot(async ({ app }) => {
app.component('BlitzForm', { BlitzForm })
app.component('CodeBlock', { BlitzForm })
})_

And in quasar.conf.js I added "blitzar" into boot:
boot: [
'blitzar'
],

**Now I get the warning:**
_[Vue warn]: Component is missing template or render function. at <BlitzForm schema= Array [ {…}, {…} ] modelValue= Object {  } onUpdate:modelValue=fn  ... >_ 

[mesqueeb]

your code seems wrong.

First of all, you need to globally register BlitzForm like so:

• ✅ correct: app.component('BlitzForm', BlitzForm)
• ❌ wrong: app.component('BlitzForm', { BlitzForm })

And second of all, I think you have a typo for CodeBlock. Where are you getting this component from?

• ✅ correct: app.component('CodeBlock', CodeBlock) (but you need to import it from somewhere)
• ❌ wrong: app.component('CodeBlock', { BlitzForm })

I hope that helps!

PS: for more assistance with this, please open a new issue. I wanna keep this thread clean and only about upgrading the Blitzar source code.

[phineas629]

Hi,

Is there a timeline for when BlitzTable will work with Vue 3?
I migrated to quasar v2 recently and would love to implement Blitzar.

[mesqueeb]

@phineas629 yes I've been working on it this week and hopefully have something out next week.

[phineas629]

@mesqueeb sweet!
I really want to try Blitzar out.
If it's a fit then you got my support.

[mesqueeb]

I have released the official Vue 3 Blitzar! 🎉

• See new docs:
  https://blitzar.cycraft.co/

Will continue to improve Blitzar heavily into 2022.

Blitzar does not use Quasar anymore and is now usable with any Vue framework.

(still need to test SSR and Nuxt though, might not be compatible with SSR just yet)

[phineas629]

Thanks! Sent from my T-Mobile 4G LTE Device Get Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Luca Ban ***@***.***> Sent: Saturday, December 18, 2021 4:08:16 AM To: CyCraft/blitzar ***@***.***> Cc: Phineas Vang ***@***.***>; Mention ***@***.***> Subject: Re: [CyCraft/blitzar] Vue 3 support (#55) I have released the official Vue 3 Blitzar! 🎉 * See new docs: https://blitzar.cycraft.co/ Will continue to improve Blitzar heavily into 2022. — Reply to this email directly, view it on GitHub<#55 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AHDA6JVHW2VRKJFHKXTSAPTURRMRBANCNFSM4V2CJVCQ>. Triage notifications on the go with GitHub Mobile for iOS<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[mesqueeb]

To everyone here:
Vue 3 release of Blitzar is getting quite stable! Closing this issue for now.

I still plan to:

• create a framework example for Quasar, Nuxt, ...

Let me know if anything's up!

_{--
Blitzar was made with 💜 by Luca Ban.
You cannot sponsor every project, but next time you do, think of this one for its prolonged maintenance.}

[phineas629]

HI Luca, Can you meet online for consulting? I have questions about blitzar integration with quasar. Thanks, Phineas On Jan 8, 2022, at 11:13 PM, Luca Ban ***@***.******@***.***>> wrote: To everyone here: Vue 3 release of Blitzar is getting quite stable! Closing this issue for now. I still plan to: * create a framework example for Quasar, Nuxt, ... Let me know if anything's up!

…

-- Blitzar was made with 💜 by Luca Ban. You cannot sponsor every project, but next time you do, think of this one<https://github.com/sponsors/mesqueeb> for its prolonged maintenance. — Reply to this email directly, view it on GitHub<#55 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AHDA6JWALEK3QSM65I3E3ZLUVEKODANCNFSM4V2CJVCQ>. Triage notifications on the go with GitHub Mobile for iOS<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[eric-nicular]

Is continued support for Blitzar still ongoing?