Nuxt Setup

Since version 2.0.0 the module supports Nuxt 3.14+ and Nuxt 4.

Installation

Please install pinia/nuxt correctly. See installation guidelines.
Yarn
yarn add pinia-orm @pinia-orm/nuxt
NPM
npm install @pinia-orm/nuxt --save
For Nuxt 2 users pinia-orm like pinia requires either to have nuxt composition api installed or nuxt bridge

Configuration

If your using Nuxt 2 and also using the nanoid package you gonna need to stick nanoid to version 3.3.4. This is related to ai/nanoid#365

E.g. yarn
package.json
...
  "resolutions": {
    "nanoid": "3.3.4"
  }
...
Nuxt 3
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt', 
    '@pinia-orm/nuxt'
  ]
})
Nuxt 2
export default {
  buildModules: [
  '@nuxtjs/composition-api/module',
  '@pinia/nuxt'
  ],
  modules: ['@pinia-orm/nuxt'],
  // Related to https://github.com/nuxt/nuxt.js/issues/7822
  build: {
    transpile: [
      'pinia-orm'
    ]
  },
}

Usage on Nuxt 2

On Nuxt 2 with nuxt composition api there is a drawback with the usage. You always gonna need to pass the pinia instance to useRepo because otherwise on client side you will get an error because the store is called outside the store.

In Nuxt 3 this problem somehow doesn't occur.

import { defineComponent, useContext } from '@nuxtjs/composition-api'
import { useRepo } from 'pinia-orm'
import User from '~/models/User'
export default defineComponent({
  name: 'IndexPage',
  setup() {
    const { $pinia } = useContext()
    const userRepo = useRepo(User, $pinia)
    
    ...
  },
})

Auto Imports

By default @pinia-orm/nuxt exposes one single auto import: useRepo(). You can add auto imports to make your life easier:

// nuxt.config.ts
export default defineNuxtConfig({
  // ... other options
  modules: ['@pinia/nuxt', '@pinia-orm/nuxt'],
  piniaOrm: {
    autoImports: [
      // automatically imports `useRepo`
      'useRepo', // import { useRepo } from 'pinia-orm'
      ['useRepo', 'usePinaRepo'], // import { useRepo as usePinaRepo } from 'pinia-orm'
    ],
  },
})

Dependency Optimization

The module automatically adds pinia-orm to vite's optimizeDeps.include, so the dev server pre-bundles it and you don't get "new dependencies optimized — reloading" restarts when the first repository is used. If you want to handle dependency optimization yourself, disable it:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt', '@pinia-orm/nuxt'],
  piniaOrm: {
    optimizeDeps: false,
  },
})
Table of Contents