Default Persistent Data Storage Import is broken?

4F2E4A2E commented 1 year ago

Environment

~/projects/github-jt6ucm ❯ npx nuxi info [22:25:02] Working directory: /home/projects/github-jt6ucm [22:25:02] Nuxt project info:

Operating System: Linux
Node Version: v18.18.0
Nuxt Version: 3.7.4
CLI Version: 3.9.0
Nitro Version: 2.6.3
Package Manager: npm@9.4.2
Builder: -
User Config: devtools
Runtime Modules: -
Build Modules: -

Reproduction

<template>
  <div>nuxt devtools is awesome</div>
</template>

<script setup lang="ts">
const storage = useStorage();
await storage.setItem('xyz:xyz', 'xyzValue');
const token = await storage.getItem(key);
</script>

Describe the bug

I am not able to get the builtin nitro store to work. The error I am getting is always the same, useStorage is not defined:

I came the across the these articles [1, 2, 3] stating that there is this new functionality and kv-store (fs-lite) out of the box for nuxt, but I am just not getting it to work.

I went ahead to latest release [4] and created a project from scratch [5], like this:

<template>
  <div>nuxt devtools is awesome</div>
</template>

<script setup lang="ts">
const storage = useStorage();
await storage.setItem('xyz:xyz', 'xyzValue');
const token = await storage.getItem(key);
</script>

1: https://nuxt.com/blog/v3-7#%EF%B8%8F-nitro-26 2: https://unjs.io/blog/2023-08-25-nitro-2.6 3: https://masteringnuxt.com/blog/24-time-saving-tips-for-nuxt3 4: https://nuxt.new/?utm_source=nuxt-com&utm_medium=dropdown&utm_campaign=home 5: https://stackblitz.com/edit/github-jt6ucm?file=app.vue

Additional context

This [1] one similar thing I could find - thx to the @create-issue documentation in-here - , but it is about unit testing the app.

1: https://github.com/nuxt/nuxt/discussions/16021

Logs

at _sfc_main.setup (./app.js:31:23)
at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:156:18)
at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7190:25)
at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7151:36)
at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:614:15)
at Module.ssrRenderComponent (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:86:10)
at default (./node_modules/nuxt/dist/app/components/nuxt-root.js:79:37)
at Module.ssrRenderSuspense (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:461:5)
at _sfc_ssrRender (./node_modules/nuxt/dist/app/components/nuxt-root.js:70:25)

stackblitz[bot] commented 1 year ago

Start a new pull request in StackBlitz Codeflow.

github-jt6ucm (Open reproduction)

danielroe commented 1 year ago

useStorage only works within the nitro part of your app (within ~/server directory), not within the vue part of your app.

Although it might be an interesting future feature for Nuxt to have isomorphic use of storage on the client side.

4F2E4A2E commented 1 year ago

Thank you for clarifying, but could you provide a working example even with the server? I am not aware of any example where anywhere using nuxt, I would set a kv and see it in the devtools without any other additional setup or dependency.

I did move the code to the server, but the result is the same:

//app.vue
<template>
  <div>nuxt devtools is awesome: {{ helloWorld }}</div>
</template>

<script setup lang="ts">
import { testStore } from './server/store';

const helloWorld = await testStore();
console.log(helloWorld);
</script>

//server/store.ts
export async function testStore() {
  const key = 'xyz:xyz';
  const storage = useStorage();
  await storage.setItem(key, 'xyzValue');
  const result = await storage.getItem(key);
  console.log(result);
  return result;
}

https://stackblitz.com/edit/github-jt6ucm-wbzxxw?file=app.vue

nuxt / nuxt