Skip to content

marlocorridor/nuxt-content-from-api

Repository files navigation

Nuxt Content from API

npm version npm downloads License Nuxt

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.

Features

  • Supports multiple connection configuration
  • Configurable API request (base url, path, fetch options)
  • Configurable target directory for implementing paths
  • Nuxt hook on build:before

Quick Setup

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 ✨

Configuration

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,
  }
}

Contribution

  • 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