Vue 3 - how to use CASL when we won't know a user's permissions until they log in?

[ffxsam]

I'm finding some of the documentation confusing. For example:

import { createApp } from 'vue';
import { abilitiesPlugin } from '@casl/vue';
import ability from './services/ability';

createApp()
  .use(abilitiesPlugin, ability, {
    useGlobalProperties: true
  })
  .mount('#app');

But this approach is not possible in I'd say most cases, where a user has to log in, and the Vue app has already been created and set up.

I figure this should work in a very top-level Vue component:

  setup() {
    const myCustomAbility = defineAbility((can) => {
      // ...
    });

    provideAbility(myCustomAbility)
  }

But it's odd that the documentation says:

Very rarely, we may need to provide a different Ability instance for a sub-tree of components, and to do this we can use provideAbility hook.

Am I going about this the wrong way? provideAbility seems to be the only way to use CASL in a Vue app where users have to authenticate. In our case, once a user logs in, we know their "group" which defines which permission they have.

[stalniy]

Start with empty ability and then update permissions via ability.update. The doc says about providing different Ability instance. No point to provide different just update singleton object. 1 Ability per app

check examples for more details - https://github.com/stalniy/casl-examples/tree/master/packages/vue-blog

[ffxsam]

Perfect! Thank you for creating CASL!