Skip to main content

Vue Integration

Using the Frontend SDK with Vue 3.

Plugin Setup​

import { createApp } from 'vue';
import { createAppServerPlugin } from '@easy/appserver-frontend-sdk/vue';
import App from './App.vue';

const app = createApp(App);

// Session and settings are provided by the Shell
app.use(createAppServerPlugin({
  sessionContext: window.__APPSERVER_SESSION__,
  appSettings: window.__APPSERVER_SETTINGS__
}));

app.mount('#app');

Composables​

The SDK provides Vue composables for accessing AppServer features.

useSession​

Access user session information:

<script setup>
import { useSession } from '@easy/appserver-frontend-sdk/vue';

const { session, isAuthenticated } = useSession();
</script>

<template>
  <div v-if="isAuthenticated">
    <p>User ID: {{ session.userId }}</p>
    <p>Roles: {{ session.roles.join(', ') }}</p>
  </div>
</template>

useAppSettings​

Access application settings:

<script setup>
import { useAppSettings } from '@easy/appserver-frontend-sdk/vue';

const { settings } = useAppSettings();
</script>

<template>
  <div>
    <p>API Endpoint: {{ settings.apiEndpoint }}</p>
  </div>
</template>

useFetch​

Make authenticated API calls:

<script setup>
import { useFetch } from '@easy/appserver-frontend-sdk/vue';
import { ref } from 'vue';

const { fetch } = useFetch();
const data = ref(null);

const loadData = async () => {
  data.value = await fetch('/api/myapp/data');
};
</script>

useHasPermission​

Check user permissions:

<script setup>
import { useHasPermission } from '@easy/appserver-frontend-sdk/vue';

const hasPermission = useHasPermission();

const canWrite = hasPermission('invoice:write');
const canDelete = hasPermission('invoice:delete');
</script>

<template>
  <button v-if="canWrite">Edit</button>
  <button v-if="canDelete">Delete</button>
</template>

Reactivity​

All composables return reactive data that updates automatically when the session or settings change.

TypeScript Support​

TODO: Document TypeScript usage with Vue composables