piniajs/example-nuxt-3

Example using Nuxt 3

example-nuxt-3's Issues

Cannot read property '$nuxt' of null

Hello 👋

When I run yarn isntall and yarn dev,
the following error is displayed:

500
Cannot read property '$nuxt' of null
at Module.useNuxtApp (file://./.nuxt/dist/server/server.mjs:243:28)
at Module.useMeta (file://./.nuxt/dist/server/server.mjs:1497:25)
at file://./.nuxt/dist/server/server.mjs:1249:25
at file://./.nuxt/dist/server/server.mjs:186:38
at callWithNuxt (file://./.nuxt/dist/server/server.mjs:230:13)
at applyPlugin (file://./.nuxt/dist/server/server.mjs:186:10)
at Module.applyPlugins (file://./.nuxt/dist/server/server.mjs:191:11)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async createNuxtAppServer (file://./.nuxt/dist/server/server.mjs:34:5)
at async renderToString (file://./node_modules/vue-bundle-renderer/dist/index.mjs:248:19)

Here is my yarn.lock if you want to see the installed versions for some packages
yarn.lock.txt

Something went wrong with this repository.

Hi,

There is an error message in the preview https://stackblitz.com/github/piniajs/example-nuxt-3

and I can't make it works locally. Can you have a look, please?

Thanks

Unalble to install in existing nuxt 3.0.0-rc.4 project

Attempting to install in a project that already has nuxt3-rc4 gives the following error stack:

npm install --save pinia
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR!   peer vue@"^3.2.37" from @nuxt/[email protected]
npm ERR!   node_modules/@nuxt/vite-builder
npm ERR!     @nuxt/vite-builder@"^3.0.0-rc.4" from [email protected]
npm ERR!     node_modules/nuxt
npm ERR!       dev nuxt@"^3.0.0-rc.4" from the root project
npm ERR!   peer vue@"^3.2.25" from @vitejs/[email protected]
npm ERR!   node_modules/@vitejs/plugin-vue
npm ERR!     @vitejs/plugin-vue@"^2.3.3" from @nuxt/[email protected]
npm ERR!     node_modules/@nuxt/vite-builder
npm ERR!       @nuxt/vite-builder@"^3.0.0-rc.4" from [email protected]
npm ERR!       node_modules/nuxt
npm ERR!         dev nuxt@"^3.0.0-rc.4" from the root project
npm ERR!   5 more (@vue/server-renderer, @vueuse/head, nuxt, vee-validate, vue-router)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! pinia@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vue
npm ERR!   peer vue@">= 2.5 < 3" from @vue/[email protected]
npm ERR!   node_modules/@vue/composition-api
npm ERR!     peerOptional @vue/composition-api@"^1.4.0" from [email protected]
npm ERR!     node_modules/pinia
npm ERR!       pinia@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
``

Note I am NOT using the composition api / it does not appear in my package.json

Edit: from package.json
``json
  "devDependencies": {
    "@nuxtjs/google-fonts": "^1.3.0",
    "@nuxtjs/tailwindcss": "^5.1.2",
    "@tailwindcss/forms": "^0.5.2",
    "@tailwindcss/typography": "^0.5.2",
    "autoprefixer": "^10.4.7",
    "daisyui": "^2.15.4",
    "nuxt": "^3.0.0-rc.4",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.3"
  },
  "dependencies": {
    "install": "^0.13.0",
    "npm": "^8.12.1",
    "vee-validate": "^4.5.11",
    "vue-typical": "^2.1.0"
  }
``

any reason why nuxt3 and pinia seems to work only with these specific packages?

any reason why nuxt3 and pinia seems to work only with these specific packages?
I've tried
nuxt3: "latest" and @pinia/nuxt:"^0.0.9" they both result in errors.

{
  "devDependencies": {
    "nuxt3": "3.0.0-27245396.550a9f2",
  },
  "dependencies": {
    "@headlessui/vue": "0.0.0-dev.9f638c9",
    "@pinia/nuxt": "0.0.7",
    "pinia": "^2.0.0-rc.14"
  }
}

500 error(Internal server error) occurs after deploy

My website works fine on local computer.
But after deployment, it doesn't work.
It shows the 500 error and shows the "nuxtAppCtx.tryUse is not a function".
This is my package.json file.
It worked fine when nuxt version is "3.0.0-rc.5".(now I use "3.0.0-rc.8").

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "dependencies": {
    "@nuxtjs/tailwindcss": "^5.3.2",
    "@pinia/nuxt": "^0.4.0",
    "axios": "^0.27.2",
    "nuxt": "3.0.0-rc.8"
  }
}

This code cannot be run

Optimizing State Management with Pinia in Nuxt.js

Hello everyone,

I'm currently working on a Nuxt.js application where I use Pinia for state management. My application involves handling various collections of todos with different filters, and I’m seeking advice on optimizing my current approach.

Current Approach:

Data Fetching and Storing:
In each page/component, I fetch data from the API with specific filters (e.g., todos older than one week, recently finished todos).
The fetched data is then stored in a Pinia store collection.

Data Retrieval:
After storing the data in the Pinia store, I apply filters again in the components to get the relevant todos from the collection.
Example Scenario:

Todos to Do Older than One Week:
Fetch todos with the status "to do" and older than one week from the API.
Store them in the Pinia collection.
Apply filters again in the component to retrieve these todos.

Recently Finished Todos:
Fetch todos with the status "finished" and completed within the last three days from the API.
Store them in the Pinia collection.
Apply filters again in the component to retrieve these todos.

Issue:
This approach seems redundant and feels heavy because I apply the filters twice: once during the fetch and once when retrieving data from the store. I’m looking for a more efficient way to manage this.

Questions:
Is it normal practice to filter data twice (during fetch and retrieval) in state management using Pinia with Nuxt.js?
How can I optimize this process to avoid redundancy and improve performance?

Best regards,
Bastien