nuxt-autoform

A Nuxt 3 module providing auto form components and API fetch composables for easy form generation and API interaction.

Features

• Auto-generate forms from API schemas
• Handle form validation and submission
• Manage API requests with built-in authentication
• Create/Update/Delete operations simplified

Components

• AutoForm: Generate forms from API schemas
• AutoComplete: Dynamic autocomplete component for search inputs
• CreateUpdateTemplate: Template for CRUD operations

Composables

• authFetch: Authenticated API requests
• basicFetch: Simple non-authenticated API requests

Quick Setup

1. Add nuxt-autoform dependency to your project

# Using npm
npm install nuxt-autoform

# Using yarn
yarn add nuxt-autoform

# Using pnpm
pnpm add nuxt-autoform

1. Add nuxt-autoform to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-autoform'
  ],
  autoform: {
    // module options
    apiBase: 'https://api.example.com'
  }
})

Usage

AutoForm Component

<template>
  <AutoForm
    :schema="schema"
    :entity="entity"
    :apiPath="apiPath"
    @submit="handleSubmit"
  />
</template>

<script setup>
const schema = ref({
  // Your schema definition
})
const entity = ref({
  // Your entity data
})
const apiPath = ref('/api/endpoint')

const handleSubmit = (data) => {
  // Handle form submission
  console.log(data)
}
</script>

AutoComplete Component

<template>
  <AutoComplete
    v-model="selectedValue"
    :dataList="options"
    :required="true"
    :create="{
      api: 'create-endpoint',
      title: 'Create New Item'
    }"
  />
</template>

<script setup>
const selectedValue = ref(null)
const options = ref([
  { id: 1, label: 'Option 1' },
  { id: 2, label: 'Option 2' },
  // ...
])
</script>

Using the Composables

import { authFetch, basicFetch } from '#imports'

// With authentication
const { data } = await authFetch.get('/api/protected-endpoint')

// Basic request without auth
const response = await basicFetch.get('/api/public-endpoint')

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the package
npm run build

License

MIT License