У цьому підручнику ми створимо сучасний блог, використовуючи Nuxt 3 як фронтенд фреймворк і Payload CMS як наш безголовий контент-менеджмент-система. Ви дізнаєтеся, як налаштувати обидві системи, підключити їх і створити просту платформу для блогу.
Що ми створимо
- Фронтенд на Nuxt 3 з можливостями SSR
- Бекенд Payload CMS для керування контентом
- Сторінки списку постів і деталі поста
- Інтеграція з API
- Підтримка TypeScript
Попередні вимоги
- Встановлений Node.js 16+
- Базові знання Vue.js/Nuxt
- Встановлений Postgres локально
- Git для контролю версій
Частина 1: Налаштування фронтенду (Nuxt 3)
Створимо наш додаток на Nuxt 3:
# Створіть папку для проекту, у цьому випадку я назву її
# nuxt_payload
mkdir nuxt_payload
# Перейдіть до папки
cd nuxt_payload
# Створіть новий проект Nuxt
npx nuxi init frontend
cd frontend
# Встановіть залежності
pnpm install
# Відкрийте в редакторі
code .
Для простоти я буду використовувати бібліотеку Tailwind CSS, https://nuxt.com/modules/tailwindcss
# інсталяція
npx nuxi@latest module add tailwindcss
У файлі nuxt.config.ts додамо @nuxt/ui у модулі, і він автоматично імпортує всі компоненти.
// frontend/nuxt-config.ts
export default defineNuxtConfig({
compatibilityDate: '2024-11-01',
devtools: { enabled: true },
modules: ['@nuxtjs/tailwindcss'],
})
Тепер ми можемо запустити і побачити стандартну сторінку, яку створив для нас Nuxt.
pnpm run dev
Фронтенд Nuxt
Частина 2: Налаштування бекенду (Payload CMS)
# Поверніться до кореневої папки
cd ..
# Створіть папку для бекенду
mkdir backend
cd backend
# Ініціалізуйте новий проект Payload
npx create-payload-app
# Виберіть наступні параметри:
# - Назва проекту: backend
# - Шаблон: blank
# - База даних: Postgresql
cd backend
# Встановіть необхідні пакети:
pnpm i @payloadcms/richtext-lexical
pnpm dev
У браузері перейдіть за адресою http://localhost:3000/admin, і ви побачите цю сторінку.
Вхід до бекенду Payload
На цій сторінці ми можемо створити першого користувача, який буде адміністратором сайту. Після цього ви будете перенаправлені на сторінку, де побачите дві стандартні колекції, які Payload створює для нас: користувачі та медіа.
Колекції за замовчуванням Payload
Створення нової колекції
Тепер, коли бекенд запущено, давайте створимо нову колекцію, яку ми можемо витягувати з нашого додатку на Nuxt.
// backend/src/collections/Posts.ts
import { CollectionsConfig } from 'payload/types';
export const Posts: CollectionsConfig = {
slug: 'posts',
admin: {
useAsTitle: 'title'
},
access: { read: () => true, },
fields: [{
name: 'title',
type: 'text',
required: true
},
{
name: 'slug',
type: 'text',
required: true,
unique: true
},
{
name: 'content',
type: 'richText',
required: true,
},
{
name: 'featuredImage',
type: 'upload',
relationTo: 'media',
required: true,
},
{
name: 'author',
type: 'relationship',
relationTo: 'users',
required: true,
},
{
name: 'status',
type: 'select',
options: [{
value: 'draft',
label: 'Draft',
},
{
value: 'published',
label: 'Published',
},
{
value: 'archived',
label: 'Archived'
}
],
defaultValue: 'draft',
required: true,
},
{
name: 'publishedDate',
type: 'date',
required: true,
},
]
}
Коли ми створили всі необхідні поля для нашої нової колекції, нам потрібно імпортувати її в файл payload.config.ts і додати в масив колекцій.
import { Posts } from './collections/Posts';
export default buildConfig({
admin: {
user: Users.slug,
importMap: {
baseDir: path.resolve(dirname),
},
},
collections: [Users, Media, Posts],
editor: lexicalEditor(),
...
})
```
Тепер перезапускаємо наш сервер і повинні побачити нашу нову колекцію в лівій боковій панелі і створювати нові пости.
Payload — Створення нового поста
Ось що ви побачите після успішного створення нового поста.
Payload — Список постів
Підключення Nuxt і Payload
Перше, що нам потрібно зробити — це змінити файл payload.config.ts, щоб додати URL сервера та дозволити нашому додатку Nuxt підключатися до бекенду.
// backend/src/payload.config.ts
...
export default buildConfig({
serverURL: '',
...
// Ми використовуємо порт 3001, оскільки будемо налаштовувати
// наш додаток Nuxt для роботи з цим портом
cors: [''],
})
Тепер у файлі nuxt.config.ts ми змінимо порт, на якому працює додаток, та додамо публічний API URL.
// frontend/nuxt-config.ts
export default defineNuxtConfig({
devServer: {
port: 3001
},
compatibilityDate: '2024-11-01',
devtools: {
enabled: true
},
modules: ['@nuxtjs/tailwindcss'],
runtimeConfig: {
public: {
apiBase: process.env.PAYLOAD_PUBLIC_BASE_URL || ''
}
},
})
Після перезапуску сервера та застосування цих змін ми зможемо отримати дані з нашого бекенду (Payload CMS) у додаток Nuxt.
Створення Composable та UI
Ми створимо composable, який отримуватиме список постів з нашого бекенду, і на основі цих даних відобразимо список постів на сайті.
// frontend/composables/usePayloadAPI.ts
export const usePayloadAPI = () => {
const config = useRuntimeConfig()
const fetchPosts = async (page = 1, limit = 10) => {
try {
const { data } = await useFetch(`${config.public.apiBase}/api/posts`, {
params: {
page,
limit,
depth: 2,
sort: '-publishedDate',
},
})
return data.value
} catch (error) {
console.error('Помилка при отриманні постів:', error)
return null
}
}
return {
fetchPosts,
}
}
Тепер нам потрібно створити компонент картки блогу, який відображатиме вміст з нашого API.
// frontend/components/blog/BlogCard.vue
Для простоти я налаштував тип поста як any, але зазвичай ви визначатимете тип поста та всі властивості, яких очікуєте, щоб уникнути невідповідностей або помилок через невідомі властивості.
Тепер нам потрібно створити основну сторінку, frontend/pages/index.vue. Ця сторінка відображатиме список постів за допомогою компонента BlogCard і даних, які ми отримали з API.
На цьому етапі, якщо ви перейдете за адресою http://localhost:3001, ви повинні побачити список ваших блог-постів.
Картки постів
Створення сторінки одного поста
Тепер створимо нову сторінку, яка використовуватиме slug як параметр маршруту для отримання даних для поточного поста. Нижче наведено простий компонент, який відображатиме вміст поста.
Перед створенням сторінки нам потрібно встановити пакет для серіалізації вмісту нашого поста, оскільки це необхідно через спосіб, яким обробляється багатий текст у Payload CMS.
https://github.com/fsyntax/payload-lexical-nuxt-serializer.
У нашій папці фронтенду виконуємо
pnpm dlx nuxi module add payload-lexical-nuxt-serializer
І додаємо наступне в файл nuxt.config.ts.
...
components: true,
payloadLexicalNuxtSerializer: {
componentsMap: {
hero: 'BlockHero',
},
},
...
Після завершення підготовки ми можемо створити новий компонент.
Якщо ми перейдемо до будь-якого з наших постів, ми повинні побачити вміст, як на зображенні нижче.
Один пост
Наступні кроки
Далі ви можете:
- Додати автентифікацію
- Реалізувати функціонал пошуку
- Додати пагінацію
- Створити сторінки категорій і тегів
- Додати функціонал коментарів
- Налаштувати оптимізацію зображень
- Налаштувати SEO та багато іншого
Висновок
Тепер у вас є сучасна платформа для ведення блогу з потужним бекендом на базі headless CMS і швидким, дружнім до SEO фронтендом на Nuxt. Це налаштування дає чудову основу для створення більш складних функцій і масштабування вашого блогу. Успіхів у програмуванні!
Перекладено з: Building a Modern Blog with Nuxt 3 and Payload CMS: A Complete Guide