pinia-plugin-ormNuxt Setup
Installation
WARNING
Please install @pinia/nuxt correctly. See installation guidelines.
bash
npm i -D pinia-plugin-orm @pinia-plugin-orm/nuxt
npm i -D pinia-plugin-orm @pinia-plugin-orm/nuxt
bash
yarn add -D pinia-plugin-orm @pinia-plugin-orm/nuxt
yarn add -D pinia-plugin-orm @pinia-plugin-orm/nuxt
bash
pnpm add -D pinia-plugin-orm @pinia-plugin-orm/nuxt
pnpm add -D pinia-plugin-orm @pinia-plugin-orm/nuxt
WARNING
For Nuxt 2 users pinia-plugin-orm like pinia requires either to have nuxt composition api installed or nuxt bridge
Configuration
ts
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
modules: [
'@pinia/nuxt',
'@pinia-plugin-orm/nuxt'
]
})
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
modules: [
'@pinia/nuxt',
'@pinia-plugin-orm/nuxt'
]
})
ts
export default {
buildModules: [
'@nuxtjs/composition-api/module',
'@pinia/nuxt'
],
modules: ['@pinia-plugin-orm/nuxt'],
// Related to https://github.com/nuxt/nuxt.js/issues/7822
build: {
transpile: [
'pinia-plugin-orm'
]
},
}
export default {
buildModules: [
'@nuxtjs/composition-api/module',
'@pinia/nuxt'
],
modules: ['@pinia-plugin-orm/nuxt'],
// Related to https://github.com/nuxt/nuxt.js/issues/7822
build: {
transpile: [
'pinia-plugin-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.
ts
import { defineComponent, useContext } from '@nuxtjs/composition-api'
import { useRepo } from 'pinia-plugin-orm'
import User from '~/models/User'
export default defineComponent({
name: 'IndexPage',
setup() {
const { $pinia } = useContext()
const userRepo = useRepo(User, $pinia)
...
},
})
import { defineComponent, useContext } from '@nuxtjs/composition-api'
import { useRepo } from 'pinia-plugin-orm'
import User from '~/models/User'
export default defineComponent({
name: 'IndexPage',
setup() {
const { $pinia } = useContext()
const userRepo = useRepo(User, $pinia)
...
},
})