Custom v-if / v-if source code

[LadIQe]

Hello community,

I want to ask, if someone knows the source code of v-if directive.

I tried to search for it, but I dont know, Im blind or something, because I was not able to find it.

Im asking this, because I want to implement my own custom directive, which works exactly the same as v-if directive, but with custom logic (checking user, checking permissions etc).

I know, I can use something like this
<div v-if="checkPermissions(roles)"></div>

But this looks more clearly and its shorter
<div v-permissions="roles"></div>

Do you know how to implement this? Im using something similar in angular (I dont like angular), but I was wondering, if its possible to use it also in Vue 3.

Thank you.

Have a nice weekend

[LinusBorg]

You don't find it because control flow directives like v-if and v-for are not normal directives with runtime code - they are handled during template copmilation by the compiler and replaced with actual Javascript code.

That is to say: If you want to write a directive that works similar to v-if, you would have to write a vite-plugin or something that extends the Vue compiler to enable that. You can't really implement v-if/else logic with a runtime custom directive.

[john-landgrave]

This is actually a case where you can use provide/inject combined with a custom directive in order to get logic similar (though not exactly the same) to v-if. I have a case where I needed the wrapper component anyways because there was UI and logic to be done, and I can hackily get it all to work in dev mode by getting at the provides in a dumb way. It would be really great if there were a "blessed" way to get at the things that are provided to the component/tag that the directive is on from the VNode that is passed into a directive binding, because then this would all work.

The use case is basically a v-if/v-else-if/v-else where UI is provided to certain users to allow them to toggle between the options or set it to automatically evaluate based on the standard logic. I would be happy to put together a minimal repro of the idea if that would help, while at the same time I would love it if there were some way that you would clue me in to get this working?

[anthonymp13]

Do you have an example? I am facing a similar issue.

[mitjans]

I'm looking to do something similar as well. Managed to have something work client side, but I don't know how to remove the node during SSR.

[douglasg14b]

Have an example of what you've found mitjans? I'm hunting for examples of a way to prevent rendering with a directive. Without just using v-if

[typed-sigterm]

I would like to recommend app.provide('p', havePermission) and v-if="$p(...)", just like vue-i18n

[LadIQe]

Thats pretty clever. Thank you.