nuxt-content-writer v1.0.0-beta.8

nuxt-content-writer

nuxt-content-writer expands @nuxt/content module functionality by allowing you to edit your /content directory visually right from inside your Nuxt app

• 📖 Release Notes

Features

• A file picker component
• Delete or create new files
• Rename files (coming soon)
• Customizable editors
• Quick wrapper for NuxtContent to load and select content easily
• Create, edit and delete pages visually
• Minimum production build size impact
• A backend API at /_editor that accepts GET, POST and DELETE requests and can traverse json files using object-path

Setup

1. Add nuxt-content-writer and its dependencies to your project

yarn add @nuxt/content # or npm install @nuxt/content
yarn add @nuxtjs/axios # or npm install @nuxtjs/axios 
yarn add nuxt-content-writer # or npm install nuxt-content-writer

2. Add nuxt-content-writer and its dependencies to the modules section of nuxt.config.js

{
  modules: [
    '@nuxt/content',
    '@nuxtjs/axios',
    'nuxt-content-writer',
  ],
  nuxtEditor: {
    // module options
  }
}

How to use

There is no guide yet but you can see how to use the available components, create a visual editor for dyanmic pages and customize editors in the eample.

If you would like to explore the source code it is usseful to know that files that end with .dev are not included in the production build at all, and files with .prod are not included in dev at all. Similarly to that, css classes that start with an _ are never found in the production build. The eample still adds costumization to those classes in production mode but that is done to make the example simpler. Ideally you want to have a local plugin in your Nuxt app that only inludes these customizations in dev mode.

To checkout the example

1. Clone this repository

git clone https://github.com/HermanLederer/nuxt-content-writer.git
cd nuxt-content-writer

2. Install dependencies

yarn

3. Start development server

yarn dev

License

MIT License