Composables
useXBlog
Blog data fetching composable — reads runtimeConfig.public.apiURL to fetch posts, categories, and tags.
useXBlog
Blog data fetching composable for the nuxt-x-marketing layer. Reads runtimeConfig.public.apiURL to construct API endpoints and returns typed fetch methods for posts, categories, tags, and individual post detail. Used internally by the layer's default /blog and /blog/[...slug] pages — call directly in your own pages or components when you override the defaults.
Usage
const {
getPosts,
getPost,
getCategories,
getTags,
} = useXBlog()
Returns
| Key | Type | Description |
|---|---|---|
getPosts | (params?: BlogQueryParams) => Promise<BlogPost[]> | Fetches a paginated list of blog posts. Accepts optional query params (page, limit, category, tag, search). |
getPost | (slug: string) => Promise<BlogPost> | Fetches a single post by its slug. |
getCategories | () => Promise<BlogCategory[]> | Fetches all blog categories. |
getTags | () => Promise<BlogTag[]> | Fetches all blog tags. |
BlogPost shape
{
slug: string
title: string
excerpt: string
content: string
image?: string
author: { name: string; avatar?: string; bio?: string }
category: string
tags: string[]
publishedAt: string
readTime?: number
}
Configuration
Requires NUXT_PUBLIC_API_URL set in the environment (or runtimeConfig.public.apiURL in nuxt.config.ts). No config is required if you do not use useXBlog.
// nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
public: {
apiURL: process.env.NUXT_PUBLIC_API_URL || '',
},
},
})
Example
<script setup>
const { getPosts, getCategories } = useXBlog()
const { data: posts } = await useAsyncData('blog-posts', () =>
getPosts({ page: 1, limit: 10, category: 'news' })
)
const { data: categories } = await useAsyncData('blog-categories', () =>
getCategories()
)
</script>
<template>
<XMarkBlogList :posts="posts" :columns="3" />
</template>
AI Context
composable: useXBlog
package: "@xenterprises/nuxt-x-marketing"
use-when: >
Fetching blog data (posts list, single post, categories, tags) from your
API in pages or components that extend the nuxt-x-marketing layer. Requires
NUXT_PUBLIC_API_URL to be set. Pair with XMarkBlogList, XMarkBlogCard,
XMarkBlogDetail, and XMarkBlogSidebar components for a complete blog UI.
Use inside useAsyncData or useFetch for SSR-safe data fetching.