@7span/nuxt-directus-blog

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 via provide/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 }