Installation

Welcome to Vue API! This guide will help you get started by explaining how to install and configure the module in your Vue 3 or Nuxt 3 projects.

For Nuxt 3

The Vue API module for Nuxt 3 is available as the @vue-api/nuxt package.

Quick Start

1. Install @vue-api/nuxt to your project:

npx nuxi@latest module add @vue-api/nuxt

2. Add @vue-api/nuxt to your nuxt.config modules

export default defineNuxtConfig({
  modules: ['@vue-api/nuxt']
})

Module Options

You can set the module options by using the vueAPI property in nuxt.config root.

export default defineNuxtConfig({
  vueAPI: {
    rootPath: 'api', // The directory where the API files are located
    ignorePatterns: [], // The patterns to ignore when generating composables
    ignorePrefixes: ['_'], // The prefixes to ignore when generating composables
  }
})

TIP

When using Nuxt, the module provides both $fetch and useFetch methods through useFetchModel. Use $fetch for client-side operations and useFetch for SSR-compatible data fetching.

That's it! You can now use Vue API in your Nuxt 3 project.

For Vue 3

The Vue API module for Vue 3 is available as the @vue-api/vue package.

npm

$ npm add -D @vue-api/vue

pnpm

$ pnpm add -D @vue-api/vue

yarn

$ yarn add -D @vue-api/vue

yarn (pnp)

$ yarn add -D @vue-api/vue

bun

$ bun add -D @vue-api/vue

To use this module please add the vueApiPlugin to your vite configuration.

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import { plugin as vueApiPlugin } from '@vue-api/vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    vueApiPlugin({
      rootPath: 'api', // The directory where the API files are located
      ignorePatterns: [], // The patterns to ignore when generating composables
      ignorePrefixes: ['_'], // The prefixes to ignore when generating composables  
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  preview: {
    port: 3001
  },
  server: {
    port: 3001
  }
})

By default, this plugin searches for API files in the api folder. However, you can customize this path by passing an rootPath parameter to the plugin.