Vue Composables

Discover the composables to use in your Vue components and pages.

useInitData()

useInitData() is a composable that fetches the initial data for a page. It is only fetched during the first SSR request and is then stored with useState() passed to the client side hydration.

It usually fetches the main navigation, footer navigation, the translations and the global configuration. The data is cached using useDataCache() and only be fetched once during the first request.

Example usage in easy texts loader for the translations:

import { defineEasyTextsLoader } from '#nuxt-easy-texts/types'

export default defineEasyTextsLoader(() => {
  const language = useCurrentLanguage()
  return {
    async load() {
      const data = await useInitData()
      return data.value.translations
    }
  }
})

useDrupalRoute()

useDrupalRoute() extracts the route information for a given path from the GraphQL response. It automatically reacts on aliases or redirects provided by the Drupal. The composable is provided be the vuepal module. This composable provides the necessary GraphQL fragment and query to fetch the route data and metatags of a Drupal page.

The composable is only available, if it is enabled in the vuepal configuration.

export default defineNuxtConfig({
  vuepal: {
    drupalRoute: {
      enabled: true,
    },
  },
})

For more information about the routing and the redirect handling, you can read the routing documentation.

<template>
  <NodePage v-if="node" v-bind="node" />
</template>

<script lang="ts" setup>
  import type { NodePageFragment } from '#graphql-operations'

  const nuxtRoute = useRoute()

  // Get the data.
  const { data: query } = await useAsyncData(nuxtRoute.path, async () => {
    return await useGraphqlQuery('route', {
      path: nuxtRoute.path,
    }).then((v) => {
      return v.data
    })
  })

  // Handles redirects and metatags.
  const { entity: node } = await useDrupalRoute<NodePageFragment>(query.value)
  await renderPageDependencies()
</script>

GraphQL Query

query route($path: String!) {
  ...routeQuery

  route(path: $path) {
    ... on EntityUrl {
      entity {
        ...nodePage
      }
    }
  }
}

useBreadcrumbLinks() provides the breadcrumb links for the current page. It can be called in any component or page, but has to be wrapped in <NuxtPageDependency> if it is displayed outside the <Nuxt> component. This is because the breadcrumb links depend on data that is only available in the <Nuxt> routeQuery.

<script setup>
  const breadcrumb = useBreadcrumbLinks()
</script>

<template>
  <div>
    <NuxtPageDependency>
      <Breadcrumb v-if="showBreadcrumb" :links="breadcrumb" />
    </NuxtPageDependency>
  </div>
</template>

useDrupalMessages()

useDrupalMessages() gives access to all fetched Drupal messages globally.


<template>
  <div v-if="messages.length">
    <div
      v-for="(message, i) in messages"
      :key="i"
    >
      <div v-html="message.message" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  const { messages } = useDrupalMessages()
</script>

useDrupalUser()

useDrupalUser() provides access to the current Drupal user and its roles. It can easily be extended.


<script setup lang="ts">
  const drupalUser = useDrupalUser()
</script>
Table of Contents