Nuxt Setup

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'
    ],
  },
})
Table of Contents