Composables

The composable provided by the module provides helpers to fetch page and menu data, handle errors, and render custom components.

useDrupalCe

This composable exports a collection of utilities to handle Drupal content and functionality.

Page Handling

• fetchPage(path: string, query?: Object, errorHandler?: Function, skipProxy?: boolean) - Fetches a page by path
• getPage() - Returns the current page state
• usePageHead(page: Ref<any>, include?: Array<'title' | 'meta' | 'link' | 'jsonld'>) - Sets page head metadata from Drupal data
• getPageLayout(page?: Ref<any>) - Gets current page layout name (defaults to 'default')

Menu Handling

• fetchMenu(name: string, options?: Object, errorHandler?: Function, skipProxy?: boolean) - Fetches a menu by name

Component Rendering

• renderCustomElements(elements: string | object | Array) - Renders one or multiple custom elements from JSON data
• resolveCustomElement(element: string) - Resolves a custom element name to a Vue component

Messages

• getMessages() - Returns Drupal messages of the current page

API Utilities

• $ceApi(options?: Object, skipProxy?: boolean) - Creates a configured fetch instance
• useCeApi(path: string, options?: Object, passThroughHeaders?: boolean, skipProxy?: boolean) - Fetches data from Drupal CE API endpoint
• getCeApiEndpoint(localize?: boolean) - Gets API endpoint with optional localization
• getDrupalBaseUrl() - Gets configured Drupal base URL
• getMenuBaseUrl() - Gets configured menu base URL

Example usage

The following example makes use of the fetchPage method to get the current page:

<script setup>
  const { fetchPage } = useDrupalCe()
  const page = await fetchPage(useRoute().path)
</script>