Nuxt module for Nuxt Content. This module takes your API config to create files (.md, .yml, .csv, and .json) to be used by Nuxt Content, thereby accessing full features of Nuxt Content module.
- Supports multiple connection configuration
- Configurable API request (base url, path,
fetch
options) - Configurable target directory for implementing paths
- Nuxt hook on
build:before
Install the module to your Nuxt application with one command:
npx nuxi module add nuxt-content-from-api
Be sure that your API response is an array or objects that has slug
and content
attributes.
Adjust options on configuration to use other attribute name using slugAttribute
and contentAttribute
. See more on configuration below.
[
{
"slug": "test-1",
"content": "# my title\n Content 1"
},
{
"slug": "test-2",
"content": "# my title\n Content 2"
}
]
That's it! You can now use Nuxt Content from API in your Nuxt app ✨
On your nuxt.config.ts
, define the nuxtContentFromApi
attribute. Default values "works" with sample data.
{
modules: [
'nuxt-content-from-api',
],
nuxtContentFromApi: {
connections: [
{
apiBase: 'https://mocki.io/v1', // 'https://YOURHOST/api',
apiPath: '/5902631b-810f-4696-a6f6-0f89b7f99844', // '/blog/all'
fetchOption: {},
slugAttribute: 'slug',
contentAttribute: 'content',
directory: './content/blog',
fileExtension: '.md',
verbose: true,
},
{
apiBase: 'https://mocki.io/v1',
apiPath: '/a630127a-8605-42be-a9a2-c595d504de73', // CSV sample
fetchOption: {},
slugAttribute: 'slug',
contentAttribute: 'content',
directory: './content/news/',
fileExtension: '.csv',
verbose: true,
},
],
enabled: true,
}
}
- You may add your name here on your pull request
Local development
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release