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

1# Using pnpm
2pnpm add -D nuxt-directus-seo
3# Using yarn
4yarn add --dev nuxt-directus-seo
5# Using npm
6npm install --save-dev nuxt-directus-seo

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

1export default defineNuxtConfig({
2  modules: [
3    'nuxt-directus-seo'
4  ]
5})

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)

1    useDirectusCollectionSeo('COLLECTION_NAME', {
2        title: "ABC",
3        id: 34
4    });

• 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

1{
2    "title": "TITLE",
3    "id": "",
4    "seo_details": {
5       "meta_title": "..." 
6    }
7}