You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Nuxt Content version 3 is the last version of the Git-based CMS designed for Nuxt developers.
4
+
description: The powerful Git-based CMS designed specifically for Nuxt developers.
5
5
---
6
6
7
-
We’re excited to announce Nuxt Content v3, a major upgrade with enhanced performance and new features. As the latest iteration of our Git-based CMS, Nuxt Content v3 is optimized for modern applications built with Nuxt.
7
+
Welcome to Nuxt Content v3, a major upgrade that brings enhanced performance and innovative features to your Nuxt projects. This latest iteration of our Git-based CMSis optimized for modern application development.
8
8
9
9
## What's New?
10
10
11
11
### Content Collections
12
12
13
-
Collections are groups of related content items within your Nuxt Content project. They help organize and manage large datasets more efficiently, introducing a host of benefits:
13
+
Collections organize related items within your project, helping you manage large datasets more efficiently. Key benefits include:
14
14
15
-
-**Define Collections**: Configure database structures and define your collections in the `content.config.ts` file.
16
-
-**Type-safe Queries**: Optimal Typescript integration with all Nuxt Content utilities.
17
-
-**Automatic Validation**: Validate frontmatter fields or data files (json, yml...) to ensure data consistency and accuracy.
18
-
-**Powerful Query Builder**: Use the query builder to filter, sort, and paginate your content collections.
19
-
-**Studio Integration**: Collections empower the [Studio](https://nuxt.studio), enhancing form generation and ensuring the best editing experience on the platform.
15
+
-**Structured Data**: Configure database architecture and define collections in [`content.config.ts`](/getting-started/collections#defining-collections)
16
+
-**Type-safe Queries**: Direct TypeScript integration across all utilities
17
+
-**Automatic Validation**: Ensure data consistency across frontmatter fields and data files (json, yml...)
18
+
-**Advanced Query Builder**: Filter, sort, and paginate your collections with ease
19
+
-**Studio Integration**: Enhanced form generation and optimal editing experience through [Studio](https://nuxt.studio)
20
20
21
-
Read more about [Content Collections](/getting-started/collections).
21
+
Learn more about [Content Collections](/getting-started/collections).
22
22
23
-
### Improved Performance with SQL Storage
23
+
### Improved Performance
24
24
25
-
A key challenge with Nuxt Content v2 was the large bundle size required to store all content files. It was mainly an issue when deploying to edge platforms like [NuxtHub](https://hub.nuxt.com/).
25
+
A significant challenge in v2 was the large bundle size needed for storing files, particularly affecting serverless deployments.
26
26
27
-
To address this, Nuxt Content v3 moves away from the file based storing in production and leverage SQL database system. This switch is transparent to users. We provide a zero config support for development mode, static generation, server rendering and edge deployments offering:
27
+
V3 addresses this by transitioning to SQL-based storage in production. This switch requires zero configuration, supporting development mode, static generation, server hosting, serverless and edge deployments.
28
28
29
-
-**Optimized Queries**: SQL storage enables ultra-fast querying, improving both performance and scalability.
30
-
-**Flexible Compatibility:** With an adapter-based system, Nuxt Content v3 easily integrates SQL databases without configuration, regardless of deployment mode (static, server-side, SPA, edge) or platform. For more details, see our [platform deployment options](/deploy/node). We're also inviting community contributions to support additional adapters.
29
+
Benefits include:
31
30
31
+
-**Optimized Queries**: SQL storage enables ultra-fast data retrieval
32
+
-**Universal Compatibility**: Our adapter-based system integrates SQL databases across all deployment modes (static, server-side, SPA, edge) and platforms. See our [platform deployment options](/deploy/node) for details. We welcome community contributions for additional adapters.
32
33
33
34
### TypeScript Integration
34
35
35
-
With help of the new collections system, the module provides automatic Typescript types for all your contents.
36
+
The new collections systemprovides automatic TypeScript types for all your data. Every utility and API is strongly typed based on your collection definitions, ensuring robust type safety throughout development.
36
37
37
-
All utilities and APIs within the module are strongly typed based on the definitions in your collections, ensuring type safety and reducing errors during development.
38
+
### Nuxt Studio Integration :badge[Soon]{color=neutral}
38
39
39
-
### Built with Nuxt Studio in mind
40
-
41
-
[Nuxt Studio](https://nuxt.studio) was originally developed alongside Nuxt Content v2, but with v3, we're building the module with the Studio experience in mind. This is why we are providing a tighter integration with Nuxt Studio as our goal is to create the best CMS platform for content editing, while still offering the best developers experience.
42
-
43
-
The [studio module](https://github.com/nuxtlabs/studio-module) will now be part of Nuxt Content itself. We want the developer to focus on code and let the non technical collaborators edit the content with an intuitive interface.
40
+
[Nuxt Studio](https://nuxt.studio) and v3 are designed to complement each other perfectly. The [studio module](https://github.com/nuxtlabs/studio-module) is now integrated directly into Nuxt Content, creating an ideal environment where developers can focus on code while team members manage content through an intuitive interface.
44
41
45
42
:hr
46
43
47
-
We're excited about the possibilities Nuxt Content v3 brings to your projects. Explore our documentation to learn more about the module integration and all the best practices for building your next website.
44
+
We're excited for you to explore these new capabilities. Dive into our documentation to learn more about integrating the module and implementing best practices in your next project.
Copy file name to clipboardExpand all lines: docs/content/1.getting-started/2.installation.md
+22-6Lines changed: 22 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,11 @@
1
1
---
2
2
title: Installation
3
-
description: 'Learn how to install and configure Nuxt Content v3 in your application.'
3
+
description: 'Get started with Nuxt Content v3 in your Nuxt application.'
4
4
---
5
5
6
-
##Setup
6
+
### Install the Package
7
7
8
-
1. Install the Nuxt Content v3 alpha package:
8
+
Choose your preferred package manager to install Nuxt Content v3:
9
9
10
10
::code-group
11
11
@@ -27,15 +27,19 @@ bun add @nuxt/content@next
27
27
28
28
::
29
29
30
-
2. Register the Nuxt Content module in your `nuxt.config.ts`{lang="ts-type"}:
30
+
### Register the Module
31
+
32
+
Add the Nuxt Content module to your `nuxt.config.ts`:
31
33
32
34
```ts [nuxt.config.ts]
33
35
exportdefaultdefineNuxtConfig({
34
36
modules: ['@nuxt/content']
35
37
})
36
38
```
37
39
38
-
3. Create `content.config.ts` file in project root directory and create your first collextion.
40
+
### Create your First Collection
41
+
42
+
Create a `content.config.ts` file in your project root directory:
39
43
40
44
```ts [content.config.ts]
41
45
import { defineCollection } from'@nuxt/content'
@@ -46,4 +50,16 @@ export const collections = {
46
50
source: '**/*.md'
47
51
})
48
52
}
49
-
```
53
+
```
54
+
55
+
This configuration creates a default `content` collection that processes all Markdown files in your project. You can customize the collection settings based on your needs.
56
+
57
+
::tip
58
+
The `type: page` setting specifies that each file in the collection represents a [Markdown page](/usage/markdown).
description: 'How to define and configue content collections.'
4
-
navigation:
5
-
title: Content Collections
2
+
title: 'Content Collections'
3
+
description: 'Learn how to define and configure content collections in your Nuxt application.'
6
4
---
7
5
8
-
Collections in Nuxt Content are a powerful way to organize and manage your content. They allow you to group related content items together, making it easier to query, display, and maintain your site's content.
9
-
10
-
11
6
## What are Content Collections?
12
7
13
-
Content Collections are groups of related content items within your Nuxt Content project. They provide a structured way to organize and manage your content, making it easier to work with large amounts of data.
14
-
15
-
Key features of Content Collections include:
16
-
17
-
1.**Logical Grouping**: Collections allow you to group similar content together, such as blog posts, product pages, or documentation articles.
18
-
19
-
2.**Shared Configuration**: You can apply common settings and validations to all items within a collection, ensuring consistency across your content.
20
-
21
-
3.**Improved Querying**: Collections make it easier to fetch and filter related content items, enhancing the performance and flexibility of your content queries.
8
+
Content Collections organize related items within your Nuxt Content project. They provide a structured way to manage your content, making it easier to query, display, and maintain your site's data.
22
9
23
-
4.**Automatic Type Inference**: Nuxt Content can automatically infer the structure of your content, providing type safety and autocompletion in your development environment.
10
+
Key features include:
24
11
25
-
5.**Flexible Structure**: Collections can be organized in various ways, such as by content type, category, or any other logical grouping that suits your project's needs.
12
+
-**Logical Grouping**: Group similar content together, such as blog posts, product pages, or documentation articles
13
+
-**Shared Configuration**: Apply common settings and validations across all items within a collection
14
+
-**Improved Querying**: Fetch and filter related content items efficiently
15
+
-**Automatic Type Inference**: Get type safety and autocompletion in your development environment
16
+
-**Flexible Structure**: Organize collections by content type, category, or any other logical grouping that suits your needs
26
17
27
18
## Defining Collections
28
19
29
-
To define a custom collection, create `content.config.ts` file in ptoject's root directory. This is a special file that Nuxt Content will load and use to configure collections database, utility types and finding/parsing/querying contents.
20
+
Create a `content.config.ts` file in your project's root directory. This special file configures your collections database, utility types, and content handling.
30
21
31
-
Here's a simple example of how to define collections in your `content.config.ts` file:
22
+
Here's a basic example:
32
23
33
24
```ts [content.config.ts]
34
25
import { defineCollection } from'@nuxt/content'
35
26
36
-
// Export collections
37
27
exportconst collections = {
38
-
// Define collection using `defineCollection` utility
39
28
docs: defineCollection({
40
-
// Define the source directory for the collection
41
-
// `source: '**'` will load every file inside `content` directory
29
+
// Load every file inside the `content` directory
42
30
source: '**',
43
31
// Specify the type of content in this collection
44
32
type: 'page'
@@ -48,24 +36,19 @@ export const collections = {
48
36
49
37
### Collection Schema
50
38
51
-
Schema is and important part of each collection. Schemas enforce consistent data within a collection. Schemas also are grounf truth of Typescript typings for collections.
39
+
Schemas enforce data consistency within a collection and serve as the source of truth for TypeScript types.
52
40
53
-
To define schema for you collection, go to `content.config.ts` and provide `schema`for your collection in `defineCollection` function.
41
+
Define a schema by adding the `schema`property to your collection by using a [`zod`](https://zod.dev) schema:
54
42
55
43
```ts [content.config.ts]
56
44
import { defineCollection, z } from'@nuxt/content'
57
45
58
-
// Export collections
59
46
exportconst collections = {
60
-
// Define collection using `defineCollection` utility
61
47
docs: defineCollection({
62
-
// Define the source directory for the collection
63
-
// `source: '**'` will load every file inside `content` directory
64
-
source: '**',
65
-
// Specify the type of content in this collection
48
+
source: '**.md',
66
49
type: 'page',
67
50
// Define custom schema for docs collection
68
-
schema: z.object({ // Schema root should be an object!!
51
+
schema: z.object({ // Schema must be an object
69
52
tags: z.array(z.string()),
70
53
image: z.string(),
71
54
date: z.Date()
@@ -74,41 +57,52 @@ export const collections = {
74
57
}
75
58
```
76
59
60
+
::tip
61
+
`@nuxt/content` exposes a `z` object that contains a set of Zod schemas for common data types.
62
+
::
77
63
78
-
### Multiple collections
79
-
80
-
Defining multiple collections is as easy as creating one.
64
+
### Multiple Collections
81
65
66
+
You can define multiple collections to organize different types of content:
82
67
83
68
```ts [content.config.ts]
84
69
import { defineCollection, z } from'@nuxt/content'
85
70
86
-
// Export collections
87
71
exportconst collections = {
88
-
// Define collection using `defineCollection` utility
89
72
blog: defineCollection({
90
-
// Define the source directory for the collection
91
-
// `source: 'blog/**'` will load every file inside `content/blog` directory
92
-
source: 'blog/**',
93
-
// Specify the type of content in this collection
73
+
// Load top-level Markdown files from content/blog
74
+
source: 'blog/*.md',
94
75
type: 'page'
95
76
}),
96
77
docs: defineCollection({
97
-
// Define the source directory for the collection
98
-
// `source: 'docs/**'` will load every file inside `content/docs` directory
99
-
source: 'docs/**',
100
-
// Specify the type of content in this collection
78
+
// Load all Markdown files from content/docs
79
+
source: 'docs/**.md',
101
80
type: 'page'
102
81
})
103
82
}
104
83
```
105
84
106
85
## Querying Collections
107
86
108
-
Nuxt Content provides `queryCollection` utility to query a collection and fetch on or all contents.
109
-
110
-
```ts
111
-
const docs =awaitqueryCollection('docs').all()
87
+
Use the [`queryCollection`](/api/query-collection) util to fetch one or all items from a collection:
description: How to deploy Nuxt Content to NuxtHub.
4
+
navigation:
5
+
icon: i-simple-icons-nuxtdotjs
6
+
---
7
+
8
+
Nuxt Content uses Nuxt deployment presets to adjust the build process for different hosting platforms. To deploy your Nuxt Content to Cloudflare, you can use the `cloudflare_pages`{lang="ts-type"} preset.
9
+
10
+
You can do that in two ways:
11
+
12
+
- By defining the `NITRO_PRESET`{lang="ts-type"} to `cloudflare_pages`{lang="ts-type"} when running the build process, like so:
13
+
14
+
```bash
15
+
NITRO_PRESET=cloudflare_pages npm run build
16
+
```
17
+
18
+
Or by updating your Nuxt configuration:
19
+
20
+
```bash
21
+
"preset": "cloudflare_pages",
22
+
```
23
+
24
+
If you use the [Cloudflare Pages GitHub/GitLab integration][1]{target="_blank"} Nuxt does not require configuration for presets.
25
+
26
+
## Database
27
+
28
+
Unfortunately sqlite database is not supported in cloudflare environment and you should use another database.
29
+
You can simply create a D1 database in cloudflare and use Content Module's D1 adapter.
30
+
31
+
- You can simply use [Nuxt Hub][nuxt-hub] to create, connect and manage D1 database for you.
32
+
- Or you can create it directly create a D1 database from Cloudflare dashboard and connect it to you project by creating a `wrangler.toml` file in project root. [Get started with Cloudflare D1][d1]
0 commit comments