vue.jsvuejs3inertiajsadonis.jspinia

Pinia does not initialize in project with inertiajs, vue and adonisjs


Pinia does not initialize in project with inertiajs, vue and adonisjs.

I tried a few different ways, but inertiajs doesn't activate pinia. And when I try to access the stores, the error is shown in the console stating that the pinia is not yet active.

Note: Pinia is installed.

I tried in different ways, but I can't understand. And it's been a few days.

Any ideas that might help resolve this issue?

grateful for the attention.

app.js

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import {createPinia} from "pinia";
const pina = createPinia()
import DefaultLayout from './Layouts/DefaultLayout.vue'


createInertiaApp({
  resolve: (name) => {
    const page = require(`./Pages/${name}`).default
    if (!page.layout) {
      page.layout = DefaultLayout
    }
    return page
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(pina)
      .use(plugin)
      .mount(el)
  },
}).then()

Home.vue

<script lang="ts" setup>
import { useCounterStore } from '../Stores/counter'
const store = useCounterStore()

console.log(store)
</script>

<template>
<div>oi</div>
</template>

<style scoped>

</style>

counter.ts

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Eduardo' }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia?


Solution

  • I managed to resolve. The store file must be js and not ts. Thank you for your attention.

    counter.js