Vue
Learn how to use Permix with Vue applications
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:
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:
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:
import { createComponents } from 'permix/vue'
// ...
export const { Check } = createComponents(permix)And then you can use the Check component in your templates:
<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:
<script setup lang="ts">
import { usePermix } from 'permix/vue'
import { permix, Check } from './lib/permix'
const props = defineProps<{
post: Post
}>()
const { check, isReady } = usePermix(permix)
</script>
<template>
<div>
<div v-if="!isReady">Loading permissions...</div>
<template v-else>
<button v-if="check('post', 'edit', props.post)">Edit Post</button>
<p v-else>You don't have permission to edit this post</p>
</template>
<Check entity="post" action="edit" :data="props.post">
Can I edit this post?
<template #otherwise>
You don't have permission to edit this post
</template>
</Check>
</div>
</template>