Questions tagged [pinia]
Pinia is a JavaScript store library for Vue.js, its purpose is to share a state across components/pages.
pinia
857
questions
1
vote
0
answers
11
views
i use Vuexy template that is build on vite vue3 and vuetify and i use pinia store, i want to add SSR to my project
the problem is that i get errors in localStorage and window being undefined in all my pages like themes, plugins and etc
and my project is considered as a middle-large sized one so i can't update my ...
- 11
-1
votes
0
answers
41
views
Cannot read properties of undefined (reading 'Vue') at initBackend, how can i solve this error?
I’m working on a Vue 3 application using Pinia for state management, and I’m encountering an issue where added messages are not rendering on the screen. Additionally, I’m getting a persistent error in ...
- 1
1
vote
1
answer
53
views
How to use Pinia with a Map of table configuration objects
I am using Pinia to manage the state of different DataTables throughout my application. It's possible for multiple tables to be opened "on top" of each other (i.e. in overlay(s) over each ...
- 3,500
0
votes
0
answers
45
views
VueJS 3.4 - Computed value to get from two sources but set in one
The logic in my app is to fetch some array of objects from API with @tanstack/vue-query, update some of those objects and send a patch request only for the updated objects.
So I created an empty array ...
- 336
1
vote
1
answer
43
views
How can you update a floating-vue dropdown popup in Vue3?
I am using Vue3, Pinia and the floating-vue library.
I am trying to dynamically create a popup at a position which depends on other elements that may move in the viewport. For this I place a dummy div ...
- 338
0
votes
1
answer
36
views
Configuration Vitest in Nuxt 3
I have a large project made with Nuxt 3, Vue, Pinia, Axios, and TypeScript.
I need help with configuring Vitest to work in my project.
I've had many problems. For example, I wrote a test and it didn't ...
- 1
0
votes
1
answer
42
views
Computed is still dirty after getter evaluation, with dependency being set asyncronously
I have a pinia store which loads data on demand from a database (specifically Firestore, but I don't think it matters).
When the data is queried, it sets a value into a reactive Map ({ id: <id>, ...
- 153
0
votes
1
answer
70
views
How to correctly implement typing for a generic pinia store in a composable?
Context
VueJs 3.4.19
Typescript 5.3.3
Pinia 2.1.6
In many views of my application, I need to fetch data from an API call. So each view have an onMounted() hook which looks like:
// Users.vue
import {...
- 124
0
votes
1
answer
58
views
Can't access useRuntimeConfig or useNuxtApp in pinia store in nuxt 3
I have a nuxt 3 project in which I cannot reference process.env. Apparently we have to do it differently for this nuxt version,
variables must be declared in nuxt.config -
this is my nuxt.config.js
...
0
votes
1
answer
60
views
How do I fix Typescript error 2307 "Cannot find module" when importing a type?
I am revising an existing a Pinia store in a Vue 3 project to use Typescript rather than JavaScript and have managed to get rid of all of my squiggly lines, partly through the use of a type called ...
- 1,611
0
votes
0
answers
39
views
How do I make this statement pass Typecript rules?
I'm new to Typescript and am trying to add Typescript checking to an existing Pinia store in a Vue 3 project. All is going well except for a Javascript reduce function that Typescript is flagging but ...
- 1,611
1
vote
1
answer
39
views
Can't retrieve data from state using Pinia with Setup function
I'm trying to get over the composition API and Pinia with Vue3.
I'm making fetch data from store.My issue is when i add response data to character(state) in fetchCharacterById(action) but when i check ...
- 11
0
votes
1
answer
19
views
Handling form input fields with Vue Composition API and Pinia store, can all v-model variables be organized into a single object?
I am using Vue3 with the Composition API and Pinia. When building a form component with various input fields, I've been handling it like this example, where each input is assigned it's own variable (...
0
votes
2
answers
37
views
Pinia state loosing reactivity when used in an object?
Trying to wrap my head around reactivity when it comes to states from a Pinia store.
I have the following store (@/stores/settings.js):
import { defineStore } from 'pinia'
export const useSettings = ...
- 1,546
0
votes
0
answers
80
views
useCookie in Nuxt 3
I use Nuxt 3, Vue 3 and pinia. I try to set cookies:
stores/auth.ts
import { defineStore } from 'pinia';
export const useAuthStore = defineStore({
id: 'auth',
state: () => {
return {
...
- 79
0
votes
1
answer
37
views
Persisting blob in Pinia
I need a little help using pinia-plugin-persistedstate.
I am trying to persist my store where I am saving files downloaded from S3
here is my store:
export const useScanStore = defineStore('scans', {
...
- 916
0
votes
0
answers
34
views
Arrays in pinia seem to be not reactive
I have problems in pinia with reactivity of an array of objects which have an array of objects themselves.
In pinia I have an array of voyage-objects. A voyage has an array of leg-objects.
If I add a ...
- 57
0
votes
1
answer
49
views
How to import Pinia into html file for display vue3 component?
I have basic vue app of 3 components with Pinia store. I need export it and use exported .js file to display component in basic html file. Without Pinia implemenation it works well, but I need this ...
0
votes
0
answers
55
views
Fetch data through pinia store in nuxt3 project on ssr
I'm trying to create a Pinia store where I can collect and modify the data that is fetched in my application.
From my components, I want to just call the store in order to get the data needed, and ...
- 492
0
votes
0
answers
48
views
Not able to use Pinia store getter inside my component
Here is my search.vue component (unrelated code removed):
<template>
<div class="tp-header-search pl-70">
<form @submit.prevent="handleSubmit"&...
- 984
1
vote
1
answer
30
views
Update HTML based on timestamps in Templates
I'm new to Vue and have a small problem.
I have a small Chat and every Message has its timestamp to display the current time-difference. Every chat has like 150 Messages.
Task:
My task now would be to ...
- 188
1
vote
0
answers
60
views
Nuxt 3 useFetch is not sending request
I use useFetch from Nuxt 3 in a Pinia function to log in a user. The first time the function is called, the request is sent successfully and the behaviour is as expected.
On the second call, e.g. ...
- 113
1
vote
1
answer
49
views
Pinia store does not initialise
I have a new Nuxt 3 project and wanted to add Pinia.
The store is created, but is not loaded. I do not receive an error message or warning.
The dev tools of both Nuxt and Vue show me that Pinia is ...
- 113
1
vote
2
answers
170
views
Hydration completed but contains mismatches using VeeValidate and Pinia in Nuxt
this week I'm having a weird error into my Nuxt app, it's a small app, it's only a landing page with a register form for an event, I worked on this last week and I published it and it works fine.
Now, ...
- 437
0
votes
1
answer
64
views
nuxt components rendering twice only in production
I'm on Nuxt 3, and it seems like my webpage renders some of the components twice, in both SSR (npm run build) and when I use nuxi generate. I am using an App.vue and Nuxt pages.
What's odd is that ...
- 3,938
0
votes
0
answers
49
views
How to update website title and favicon dynamically with Vue 3 and VueFire?
I'm using Vue 3 and Pinia to build a web, I fetch the data on a Pinia Store from Firestore using VueFire with: const placeInfo = useDocument(() => doc(db, 'places', placeName), { once: true }); and ...
- 171
0
votes
0
answers
15
views
nuxtjs3 apollo plugin not receiving the pinia state on the first login
The problem is when I tried to click the login first I received null or undefined in my plugins/apollo.ts the userStore.authToken is null or undefined however on my 2nd time trying to login I pass the ...
0
votes
1
answer
38
views
RefSymbol of Pinia store
When I use Pinia in my Nuxt3 project:
const {isSomeFlag} = storeToRefs(someStore);
I see this type of isSomeFlag
isSomeFlag: Ref<{
value: boolean
[RefSymbol]: true
}>
instead
...
0
votes
0
answers
81
views
Use Vuex and Pinia Store in Quasar
I am working on a Quasar app that uses Vuex. I need to use some modules that use Pinia so I would need to instantiate Pinia on my app as well.
My problem is, how do I instantiate both Vuex and Pinia ...
- 1,688
3
votes
1
answer
56
views
Why is a computed property necessary for reactivity in a Vue component with Pinia store?
I am storing an authenticated user of my web app (Vue and Supabase) in a Pinia store: userStore.user. My NavBar component has a login/logout link based on this state. In order to make this reactive ...
- 1,419
0
votes
0
answers
30
views
Vue3 Pinia setter not setting the value
I have a simple pinia state that has a setter method:
export const usePetStore = defineStore({
id: 'pet',
state: () => ({
pet: 'test'
}),
actions: {
setPet(newPet) {
this.pet =...
- 805
0
votes
0
answers
29
views
dependent dropdown country and sity error in vue 3 pinia
I have code to create a country and city-dependent dropdown using Vue 3 pinia store, but every time I click and select data country then the data city will always be reloaded continuously and it can't ...
0
votes
0
answers
26
views
Why am I getting duplicate entries on table search results v-table vue js3/vuetify?
I'm trying to implement search functionality over the v-table data entries.
While I search, I'm getting the right data, But I can see duplicate rows.
I'm using pinia store to store data.
Here's the ...
0
votes
1
answer
106
views
"getActivePinia()" was called but there was no active Pinia. Not sure how I'm using my store wrong
I encountered this error when trying to implement a game loop for my game. I'm using Pinia to store the global state of my game which I've created like so:
baseCamp.js
import { defineStore } from &...
0
votes
0
answers
27
views
Vue.js Pinia State and DevExpress Data Grid Issue
I am using Pinia store for state management.
I am maintaining a reactive array named userPositions which takes some time to take up values. So initially it is empty and then upon component mounting, I ...
0
votes
0
answers
59
views
How to access custom properties for pinia stores inside a setup store?
Let's say I define some custom properties for Pinia stores:
declare module 'pinia' {
export interface PiniaCustomProperties {
readonly router: Router;
set hello(value: string | Ref<...
- 18.9k
0
votes
1
answer
36
views
How to get elements to be Reactive in this particular case (Vue3, Pinia)? [closed]
Hi everyone and first of all thanks anyone who will try to help.
I have this code here which is used for the menu in the vue (it is vue component):
<script lang="ts" setup>
import { ...
- 11
0
votes
0
answers
26
views
How to implement search functionality over a plain text returned from an API in vue js3 (Vuetify)?
I have a plain text (data is just dumped from a log file) returned from an API say
The data from API is maintained in a pinia store
I'm trying to implement search functionality over this entire log ...
2
votes
2
answers
72
views
Object is possibly 'undefined' in vue3 typescript
The code below is based on vue3 with typescript used.
export interface TenantDto {
uuid: string;
name: string;
}
export const useTenantStore = defineStore('tenant', {
state: () => ({
...
- 7,735
0
votes
0
answers
43
views
VueJs3 pinia store not axios posting to correct api url from environment file
I have an .env file that works locally that has the following set: (Same host, different ports)
VUE_APP_API_URL=http://localhost:5038
VUE_APP_UI_URL=http://localhost:8080
On hosting service: (I am ...
- 683
0
votes
1
answer
60
views
How to Wait for Pinia Store Data Initialization Before Assigning Variables in Vue3 Component?
I'm building a Vue.js application using Pinia for state management. In my component, I need to assign variables based on data retrieved from a Pinia store. However, I'm encountering an issue where the ...
- 9
0
votes
0
answers
28
views
How to change the values in navbar without refresh based on the 'user' which is maintained in a pinia store vue js 3?
I have a sidenavbar which has list of items say
Home
Update
Delete
Restart
I have 2 users say admin and staff.
Home page displays by default and doesn't require any login. Once the user clicks on ...
0
votes
1
answer
71
views
How to call a function in method using Pinia in Vue3
I am getting the following error when trying to set a Token using pinia in vue 3.
error TypeError: Cannot read properties of undefined (reading 'setToken')
The following is my code set up:
<script&...
- 1
2
votes
0
answers
25
views
Reset Pinia store nuxt3 with vite HMR
I am having issues with my store not resetting properly when locally developing, this is (i suppose) because of Vite HMR in my Nuxt3 application.
My store is defined as so:
import { defineStore, ...
- 3,500
0
votes
0
answers
66
views
Issue with Pinia Store: Set object methods not accessible within actions due to Proxy
I'm using Pinia for state management in my Vue.js application, and I've encountered an issue where Set object methods are not accessible within actions. My state is defined as follows:
state: () => ...
0
votes
0
answers
60
views
How integrate @pinia-orm/axios to Nuxt 3 project so that i can use it with pini-orm? Official documention dosen't Nuxt example
The Official documention dosen't have Nuxt integration documentations or examples.
I tried creating a NUxt plugin with below code after installing all the plugins.
import { createORM } from 'pinia-orm'...
0
votes
0
answers
65
views
How to describe with JSDoc a variable in which a Pinia store is defined?
A simple code for instance:
file: @/stores/alerts.js
import { defineStore } from 'pinia'
export const useAlertsStore = defineStore('alerts', {
// other options...
actions: {
addAlert() { ... }...
- 1,498
0
votes
0
answers
301
views
Fetch data from an API using Pinia in Nuxt 3
I'm struggling to work out the best way to fetch data from an API in Pinia within a Nuxt 3 project, in order to then be able to access that data in the store when my static site is generated.
I have ...
- 417
0
votes
1
answer
53
views
Pinia query loses reactivity over fetch with useAsyncData
We got a service which fetch data from an api, populate the dedicated pinia-orm store, then return the result as an object containing the pinia-orm query result and metadata (page, totalItems...).
We ...
- 6,513
0
votes
0
answers
37
views
Define pina store that takes argument as to make a closure
I need to define a Pinia store in Vue 3 - I'm doing this to pass a user into the store so I can use it in the store methods, creating a closure so that I can create > 1 of this store instance with ...
- 10.9k