nilssso Posts - Answer Overflow

nilssso

Posts Comments

NNuxt

•Created by nilssso on 4/12/2024 in #❓・help

Empty @nuxtjs/sitemap with @nuxt/content document driven mode

9 replies

NNuxt

•Created by nilssso on 4/10/2024 in #❓・help

Nuxt Content ContentSlot and "property was accessed but is not defined"

For Nuxt Content I wrote a simple card component that wraps Nuxt UI's "UCard" so that in markdown I can write this

::card
#header
Foo
#footer
Bar
#default
Baz
::

::card
#header
Foo
#footer
Bar
#default
Baz
::

The component is defined as this:

// ~/components/content/Card.vue
<template>
  <u-card class="my-4">
    <template v-if="$slots.header" #header>
      <content-slot :use="$slots.header" unwrap="p" />
    </template>
    <template v-if="$slots.footer" #footer>
      <content-slot :use="$slots.footer" unwrap="p" />
    </template>
    <slot />
  </u-card>
</template>

// ~/components/content/Card.vue
<template>
  <u-card class="my-4">
    <template v-if="$slots.header" #header>
      <content-slot :use="$slots.header" unwrap="p" />
    </template>
    <template v-if="$slots.footer" #footer>
      <content-slot :use="$slots.footer" unwrap="p" />
    </template>
    <slot />
  </u-card>
</template>

But when loading the page I get swamped with a few "property was accessed but is not defined" Vue warn warnings

WARN  [Vue warn]: Property "class" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Property "style" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Property "key" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Property "ref" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Property "ref_key" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Property "ref_for" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.

WARN  [Vue warn]: Property "class" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Property "style" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Property "key" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Property "ref" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Property "ref_key" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Property "ref_for" was accessed during render but is not defined on instance.
WARN  [Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.

Is there anything special I need to write in the component that I missing? These warnings do not occur for <slot />, only for <content-slot>. And it doesn't look related to UCard, since if I replace u-card with just div (and remove #header/#footer from the template tags) I get the same warnings.

1 replies

NNuxt

•Created by nilssso on 2/25/2023 in #❓・help

Writing a module, how to import template into composable?

I'm trying my hand at writing a module and so far so good. 1. It fetches an OpenAPI schema 2. Builds it using openapi-typescript 3. Writes it to the project build directory via @nuxt/kit addTemplate 4. And adds a composable via @nuxt/kit addImports The setup function is this

setup(options, nuxt) {
  const { resolve } = createResolver(import.meta.url)
  const url = options.apiUrl
  if (!url) {
    throw new Error('API_URL not set')
  }
  addTemplate({
    filename: 'api.d.ts',
    write: true,
    getContents: () => openapiTS(url)
  })
  addImports({
    name: 'useApi',
    as: 'useApi',
    from: resolve('runtime/composables/useApi')
  })
}

setup(options, nuxt) {
  const { resolve } = createResolver(import.meta.url)
  const url = options.apiUrl
  if (!url) {
    throw new Error('API_URL not set')
  }
  addTemplate({
    filename: 'api.d.ts',
    write: true,
    getContents: () => openapiTS(url)
  })
  addImports({
    name: 'useApi',
    as: 'useApi',
    from: resolve('runtime/composables/useApi')
  })
}

My question now is, how can I import the written template api.d.ts into my added composable? I assume this should be possible since this is all done a build time?

1 replies

Gaming

Programming