nuxt-directus-seo

Nuxt Directus SEO

Tính năng

• Tạo config SEO cho toàn bộ app NUXTJS khi sử dụng chung với directus và module directus SEO từ codihaus

Quick Setup

1. Add nuxt-directus-seo dependency to your project

# Using pnpm
pnpm add -D nuxt-directus-seo
# Using yarn
yarn add --dev nuxt-directus-seo
# Using npm
npm install --save-dev nuxt-directus-seo

2. Add nuxt-directus-seo to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-directus-seo'
  ]
})

Cách sử dụng

1. Thêm useDirectusGlobalSeo(); vào component, layout tổng của dự án
2. Các Screen cụ thể

• Khai báo trong Screen cụ thể (Component mà router sẽ render)

    useDirectusCollectionSeo('COLLECTION_NAME', {
        title: "ABC",
        id: 34
    });

• COLLECTION_NAME: Tên collection ứng với phần setting của SEO detail
  • Khi MODEL không có setting detail, hoặc người dùng không nhập, sẽ lấy từ setting chung của collection đó
• MODEL: Dữ liệu detail của model hiện tại, với cấu trúc có sẵn field seo_details bên trong

{
    "title": "TITLE",
    "id": "",
    "seo_details": {
       "meta_title": "..." 
    }
}