On this page


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.


The auth composable manages the authenticated user.


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

# components/AuthExamples.vue


<script lang="ts" setup>
import {
} 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)

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


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


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

# components/Language.vue

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

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

const language = useLanguage()


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.


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.


The composable page handles the current page on the website.


The usePage state stores the current public page.

# components/PageTitle.vue

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

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

const page = usePage()


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.


The composable token handles JSON web tokens.


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

# components/UserId.vue

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

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

const token = useToken()

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.


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

# components/CachedTranslatableStrings.vue

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

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

const translatableStrings = useTranslatableStrings()

Find more information about translatable strings on this documentation page.

Last updated on January 14, 2024 at 13:21