Vue

Overview

Permix provides official Vue integration through the permixPlugin and usePermix composable. This allows you to manage permissions reactively in your Vue app.

Before getting started with Vue integration, make sure you've completed the initial setup steps in the Quick Start guide.

Setup

First, install the Vue plugin in your application:

main.ts

import { createApp } from 'vue'
import { permixPlugin } from 'permix/vue'
import { permix } from './lib/permix'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(permixPlugin, { permix })
app.mount('#app')

Remember to always use the same Permix instance here and in the usePermix composable to maintain type safety.

Composable

For checking permissions in your components, you can use the usePermix composable. And to avoid importing the composable and Permix instance in every component, you can create a custom composable:

composables/use-permissions.ts

import { usePermix } from 'permix/vue'
import { permix } from './lib/permix'
 
export function usePermissions() {
  return usePermix(permix)
}

Components

If you prefer using components, you can import the createComponents function from permix/vue and create checking components:

lib/permix.ts

import { createComponents } from 'permix/vue'
 
// ...
 
export const { Check } = createComponents(permix)

And then you can use the Check component in your templates:

page.vue

<template>
  <!--
    reverse: Will flip the logic of the permission check
    otherwise: Will show this if a user doesn't have permission
  -->
  <Check entity="entity" action="action" :data="data" reverse>
    Will show this if a user have permission
    <template #otherwise>
      Will show this if a user doesn't have permission
    </template>
  </Check>
</template>

Usage

Use the usePermix composable in your components to check permissions: