Nuxt Contentful Pages

A Nuxt module for easy use of pages from Contentful

• ✨  Release Notes

Features

• Nuxt 3 ready
• Contentful Integration

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-contentful-pages

Then add your contentful space id and access token

CONTENTFUL_SPACE_ID=<YOUR_SPACE_ID>
CONTENTFUL_ACCESS_TOKEN=<YOUR_ACCESS_TOKEN>

To get all wired up you need to add the NuxtPage component to your App.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

and add a page /page/[...slug.vue] to handle all requests like the example below

<template>
    
    <div>        
        <div v-html="page?.body"></div>        
    </div>    
</template>
<script setup lang="ts">

  // import your type matching the fields in your Contentful content type
  import { type StandardPage } from '../types/StandardPage'


  // Get the page
  //
  const page = await useFetchContentfulPageBySlug<StandardPage>('standardPage')

</script>

```bash



That's it! You can now use Contentful in your Nuxt app ✨


## Contribution

<details>
  <summary>Local development</summary>
  
  ```bash
  # 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