@7span/nuxt-directus-blog
v0.1.11
Published
Components for rendering Nuxt Directus Blog
Downloads
86
Readme
How to use
// nuxt.config.js
{
modules : ['@7span/nuxt-directus-blog'],
// Default Configuration
directusBlog: {
baseUrl: "https://products.7span.in",
assetsBaseUrl: "https://7span-product.b-cdn.net",
collection: "bg_articles",
productId : "your_product_id"
},
}
Components
DbArticleCard
[!NOTE]
DbArticleCard component used for listing. Response is Array of object recieved from API
<template v-for="data in response" :key="data.id">
<DbArticleCard :data="data">
<template #default>
<DbArticleTitle>
<template #default="{ data }">
<custom-component :value="data.title" />
<!-- Same data pattern applies for below components -->
</template>
</DbArticleTitle>
<DbArticleAuthor
#default="{ data : { author : { first_name , last_name, description, email, avatar } }}"
>
</DbArticleAuthor>
<DbArticleDate />
<DbArticleCoverImage />
</template>
</DbArticleCard>
</template>
DbArticle
[!NOTE]
DbArticle component Provides data. Child components like DbArticleTitle utilizes data viaprovide/inject
api.
<DbArticle>
<DbArticleTitle>
<template #default="{ data }">
<custom-component :value="data.title" />
<!-- Same data pattern applies for below components -->
</template>
</DbArticleTitle>
<DbArticleSummary />
<DbArticleAuthor
#default="{ data : { author : { first_name , last_name, description, email, avatar } }}"
>
</DbArticleAuthor>
<DbArticleDate />
<DbArticleCoverImage />
<DbArticleSections />
<DbArticleTags />
</DbArticle>
// Composable available
const { data } = await useDbArticle();
Atomic Components
DbArticleTitle
<DbArticleTitle>
<template #default="{ data }">
<custom-component :value="data.title" />
</template>
</DbArticleTitle>
DbArticleDate
<DbArticleDate>
<template #default="{ data : { formatted_date , date } }">
<!--
formatted_date -> 20 September 2023
date -> new Date() String
-->
<custom-component :value="formatted_date" />
</template>
</DbArticleDate>
<DbArticleAuthor>
<template
#default="{ data : { author : { first_name , last_name, description, email, avatar } }}"
>
<custom-component :value="first_name" />
</template>
</DbArticleAuthor>
DbArticleSummary
<DbArticleSummary>
<template #default="{ data }">
<custom-component :value="data.summary" />
</template>
</DbArticleSummary>
DbArticleCoverImage
<DbArticleCoverImage>
<template #default="{ data }">
<custom-component :value="data.url" />
</template>
</DbArticleCoverImage>
DbArticleSections
<DbArticleSections>
<template #default="{ data }">
<custom-component :value="data.sections">
<component
v-for="section in sections"
:key="section.item.id"
:value="section.item"
>
</component>
</custom-component>
</template>
</DbArticleSections>
DbArticleTags
<DbArticleTags>
<template #default="{ data : { tags } }">
<!-- Tags ->
[
{
label : 'Frontend',
value : 'frontend'
}
]
-->
<custom-component :value="tags" />
</template>
</DbArticleTags>
DbTags
<!-- Method 1 - use component -->
<DbTags />
// Method 2 - use composable
const { data } = await useDbTags();
Article List
- use VueList
// Use Composable
const { data } = await useDbArticles();
/*
Default parameter object
*/
params = { limit: 10, filter: {}, fields: [], page: 1 }