Vue Example

Purpose

examples/vue shows the official Vue adapter in its simplest realistic form. A user is loaded, the Permix instance is set up from that user, and components reactively check whether the current post can be edited.

What it demonstrates

the permixPlugin for app-wide access
a custom usePermissions() composable
watching the user and refreshing permissions when it changes
slot-based fallback rendering with the Vue Check component

Core idea

The example sets up one readable permission and one data-aware predicate:

lib/permix.ts

return permix.setup({
  post: {
    read: true,
    edit: post => post?.authorId === user.id,
  },
})

Inside the template, the Check component exposes an otherwise slot for denied UI:

App.vue

<Check entity="post" :action="['edit', 'read']" :data="post">
  I can edit a post inside the Check component
  <template #otherwise>
    I don't have permission to edit a post inside the Check component
  </template>
</Check>

Run it

cd examples/vue
pnpm dev

Key files

src/lib/permix.ts: Vue Permix instance and generated Check component
src/composables/permissions.ts: composable wrapper around usePermix
src/App.vue: watch-based setup and post-level checks

When to use it

Use this example if you want a Vue-first integration reference without SSR or router complexity.

Source code

Browse the example on GitHub