Composables

Pruvious provides composables for easier management of authentication, language, and the current page state. You can import all composables from the #pruvious/client handle in your Vue components.

Auth

The auth composable manages the authenticated user.

useAuth

The useAuth state automatically updates when you use the provided authentication functions such as login or logout.

# components/AuthExamples.vue

<template>
  <div>...</div>
</template>

<script lang="ts" setup>
import {
  getUserProfile,
  login,
  logout,
  logoutAll,
  logoutOtherSessions,
  renewToken,
  updateUserProfile,
  useAuth,
} from '#pruvious/client'

const auth = useAuth()

// Login with email and password (third argument is `remember`)
const loginRes = await login('user@pruvious.com', 'password', true)

if (loginRes.success) {
  console.log('User ID:', auth.value.userId)
} else {
  console.error(loginRes.error, loginRes.code)
}

// Logout
await logout()
console.log(auth.value) // { isLoggedIn: false, userId: null }

// Logout other sessions except the current one
const otherTokensRemoved = await logoutOtherSessions()
console.log(otherTokensRemoved) // 0

// Logout all sessions
const tokensRemoved = await logoutAll()
console.log(tokensRemoved) // 0

// Renew token
const renewRes = await renewToken()

if (renewRes.success) {
  console.log('User ID:', auth.value.userId)
} else {
  console.error(renewRes.error, renewRes.code)
}

// Get user profile
const user = await getUserProfile()
console.log(user) // null

// Update user profile
const profileRes = await updateUserProfile({ password: 'new-password' })

if (profileRes.success) {
  console.log('User:', profileRes.data)
} else {
  console.error(profileRes.error, profileRes.code)
}
</script>

You can find more information about authentication on this documentation page.

Language

The language composable helps you manage the current language on the website.

useLanguage

The useLanguage state stores the current language, which is automatically determined from the fetched page data.

# components/Language.vue

<template>
  <div>{{ language }}</div>
</template>

<script lang="ts" setup>
import { useLanguage } from '#pruvious/client'

const language = useLanguage()
</script>

getLanguage

To retrieve the current language and resolve it if it's not defined, you can utilize the getLanguage helper function. This function will also save the language code in the local storage.

setLanguage

You can set a language code explicitly by using the setLanguage function. This function will also automatically reload all the translatable strings used on the website.

Page

The composable page handles the current page on the website.

usePage

The usePage state stores the current public page.

# components/PageTitle.vue

<template>
  <div>{{ page?.title }}</div>
</template>

<script lang="ts" setup>
import { usePage } from '#pruvious/client'

const page = usePage()
</script>

getPage

The getPage function retrieves a public page from the specified path and sets it as the current page. If no path is provided, the function uses the current route's path. It automatically sets the usePage and useLanguage composable values. If the page is a redirect, the function returns redirect options; otherwise, it returns null.

You don't need to call this function explicitly as it is automatically invoked on each route change.

Token

The composable token handles JSON web tokens.

useToken

The useToken state stores the current token data, if it is available.

# components/UserId.vue

<template>
  <div>{{ token?.userId }}</div>
</template>

<script lang="ts" setup>
import { useToken } from '#pruvious/client'

const token = useToken()
</script>

You can import helper functions like getRawToken, getToken, removeToken, and setToken from the same alias to manually manage the stored JWT in the local storage. By default, this process is automated through middlewares.

Translatable strings

The translatable-strings composable is used to manage translations of strings from your code.

useTranslatableStrings

The useTranslatableStrings state caches fetched translatable strings based on their domain name.

# components/CachedTranslatableStrings.vue

<template>
  <div v-for="(value, domain) in translatableStrings">
    ...
  </div>
</template>

<script lang="ts" setup>
import { useTranslatableStrings } from '#pruvious/client'

const translatableStrings = useTranslatableStrings()
</script>

Find more information about translatable strings on this documentation page.