Auto-Imports

• Preset for unplugin-auto-import
• Auto-Imported Composables

Auto-Imports are amazing!. 🎉 They keep code clean and decoupled. As an added bonus, you no longer have to manually import modules at the top of every file. Feathers-Pinia comes with auto-import modules targeted at improving developer experience.

This page shows how to set up auto-imports for Single Page Apps, followed by an overview of the available auto-imports. The Nuxt module documentation shows how to install Nuxt SSR-friendly versions of these same utilities.

Preset for unplugin-auto-import

Feathers-Pinia v3 includes a preset for unplugin-auto-import, a plugin which enables auto-import for Vite, Rollup, Webpack, Quasar, and more. See setup instructions for your environment.

Once you've installed unplugin-auto-import, you can use the feathersPiniaAutoImport preset. Here is a truncated example of a vite.config.ts file:

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { feathersPiniaAutoImport } from 'feathers-pinia'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    Vue({
      reactivityTransform: true,
    }),

    // https://github.com/antfu/unplugin-auto-import
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        'vue-i18n',
        'vue/macros',
        '@vueuse/head',
        '@vueuse/core',
        feathersPiniaAutoImport,
      ],
      dts: 'src/auto-imports.d.ts',
      dirs: ['src/composables'],
      vueTemplate: true,
    }),
  ],
})

To enable custom auto-import folders, use the dirs option, shown above.

Note

You have to start (and sometimes restart) the dev server for new auto-imports to become available.

Nuxt Module

For Nuxt apps, use the Nuxt Module.

Auto-Imported Composables

You can use these utilities with auto-imports configured.

• createPiniaClient creates a Feathers-Pinia client from a Feathers Client.
• useInstanceDefaults for implicit modeling, sets up default values on instances.
• useAuth for creating auth stores.
• useDataStore for managing non-service data stores with the same local API.
• defineValues for adding configurable, non-enumerable properties to items.
• defineGetters for adding configurable, non-enumerable getters to items.
• defineSetters for adding configurable, non-enumerable setters to items.