500 error hubKV() is not defined

[lustremedia]

Describe the bug Installed nuxthub/core

enabled kv: true in config now trying to read a key const schema = await hubKV().keys('key')

I get a 500 error hubKV is not defined

Expected behavior Get an instance of KV and retrieve the key as read in documentation

[atinux]

Could you please share a minimal reproduction please?

[lustremedia]

Hi @atinux sorry here is the full error message from localhost:

withAsyncContext@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:3359:19
setup@http://localhost:3000/_nuxt/app.js?t=1731327282332:27:25
callWithErrorHandling@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:197:19
setupStatefulComponent@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:7886:46
setupComponent@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:7847:36
mountComponent@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:5203:21
processComponent@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:5169:23
patch@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:4685:27
mountSuspense@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:6801:8
process@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:6742:20
patch@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:4710:16
componentUpdateFn@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:5313:16
run@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.12/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=6f022cd1:195:19
setupRenderEffect@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:5441:5
mountComponent@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:5216:24
processComponent@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:5169:23
patch@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:4685:27
render@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:5966:12
mount@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=6f022cd1:3921:19
createApp/app.mount@http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-dom@3.5.12/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js?v=6f022cd1:1732:24
initApp@http://localhost:3000/_nuxt/home/tb/00_projects/lets-go1/node_modules/.pnpm/nuxt@3.14.159_@parcel+watcher@2.5.0_@types+node@22.9.0_ioredis@5.4.1_magicast@0.3.5_rollup@4._qv5lotuc2theykpfp36xa5gsga/node_modules/nuxt/dist/app/entry.js:60:14
async*@http://localhost:3000/_nuxt/home/tb/00_projects/lets-go1/node_modules/.pnpm/nuxt@3.14.159_@parcel+watcher@2.5.0_@types+node@22.9.0_ioredis@5.4.1_magicast@0.3.5_rollup@4._qv5lotuc2theykpfp36xa5gsga/node_modules/nuxt/dist/app/entry.js:68:19

Nuxt config:

export default defineNuxtConfig({
  ssr: false,
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: ["@formkit/nuxt", "@nuxtjs/tailwindcss", "@nuxthub/core"],
  hub: {
    kv: true
  }
})

app.vue

<script setup>
import { FormKitSchema } from "@formkit/vue";

const schema = await hubKV().keys('schema')

</script>

<template>
  <div class="bg-slate-800 rounded-xl shadow-xl p-8 mx-auto my-16 max-w-[450px]">
    <FormKit type="form" v-model="data" :actions="false" :plugins="[listenToCommit]">
      <FormKitSchema :schema="schema" :data="data" />
    </FormKit>
    <pre class="text-cyan-500 bg-black">
      {{data}}
    </pre>    
  </div>
</template>

[lustremedia]

Deployed here: https://lets-go.nuxt.dev

[lustremedia]

[lustremedia]

[atinux]

hubKV() is a server util, you cannot access it on the frontend otherwise anyone could read & write to your KV without authentication.

You need to create your own API routes if you want to expose hubKV() to your users