usePageContent

usePageContent

Composable for fetching and managing CMS-driven tab page content. Handles fetching tabs from a Strapi endpoint, dynamically loading any Vue components referenced in tab data, and keeping the active tab in sync with the URL query parameter ?tab=.

Parameters:

• apiUrl: - The full API URL to fetch page content from.
• filterFn: - Optional function (tabs) => tabs applied after fetching, before components are loaded. Use this to filter or reorder tabs based on runtime conditions (e.g. user role). Defaults to an identity function.
• options: - Optional options object.
• options.autoMount: - When true, getPageContent is called automatically via onMounted. Set to false when the calling page needs to await getPageContent() before performing additional work in its own onMounted. Defaults to true.

Returns:

• object containing pageContent, componentInstances, loading, and getPageContent.

loadComponent (async)

Nested in: usePageContent

Dynamically imports a Vue.js component by its name.

Parameters:

• name: - The name of the component to load.

Returns:

• A promise that resolves to the component object if successful, otherwise null.

getPageContent (async)

Nested in: usePageContent

Fetches page content from apiUrl, applies filterFn, preloads all referenced Vue components, then commits tabs and component instances to reactive state. Components are fully loaded before pageContent.tabs is updated to prevent rendering errors during dynamic component resolution.

(anonymous) (watch)

Nested in: usePageContent

Watches for changes in route.query.tab and updates pageContent.tab accordingly.

Parameters:

• newTab: - The new tab ID

(anonymous) (watch)

Nested in: usePageContent

Watches for changes in pageContent.tab and syncs the active tab to the URL query via router.replace. Uses replace to avoid history spam. The guard isActive prevents the watch from firing during component teardown.

Parameters:

• newTab: - The new tab ID