FoxCode Posts - Answer Overflow

Topics

FoxCode

•Created by FoxCode on 2/7/2025 in #❓・help

Nuxt Content v3 layouts

I'm migrating my project from Nuxt Content v2 to v3, and almost every page in my project uses a layout. Unfortunately, there's an issue with this: when navigating to another subpage (without a hard reload), the layout glitches, sometimes duplicates, and so on. To check the layout on each page, I'm forced to create a collection that includes all possible .md files: content: defineCollection({ type: 'page', source: '*/**.md' }), so that I can use: const route = useRoute() const { data: page } = await useAsyncData(route.path, async () => { return queryCollection('content').path(route.path).first() }) so that I can later use: <NuxtLayout :name="page?.meta?.layout || 'default'"> <NuxtPage /> </NuxtLayout> After navigating to /getting-started/usage and then clicking a button that redirects to /getting-started/test, the layout does not update. However, if I do a hard refresh, it loads correctly. How should I properly handle layouts in this case? And - is there an alternative approach to the Document-Driven mode that doesn’t require creating a collection of ALL md files? Wouldn't this duplicate content in the database? I’m using this collection only for [..slug].vue to display the correct page based on the URL. What can be done about this? Maybe I’m using the new features incorrectly, or is this a bug? PS. how can I prevent these types of issues in the future, where a hard refresh behaves completely differently from a regular navigation—especially during development? github issue: https://github.com/nuxt/content/issues/3107

10 replies

•Created by FoxCode on 1/31/2025 in #❓・help

[Content 3] Multiple sources

According to https://content.nuxt.com/docs/collections/sources Can I create collection with multiple sources? For example:

posts: {
source: [{
include: '**/*.md' // Normal content/... md files
}{
cwd: path.resolve('packages/my-pkg/docs'),
include: '**/*.md' // and docs files, everything as posts
}]
}

posts: {
source: [{
include: '**/*.md' // Normal content/... md files
}{
cwd: path.resolve('packages/my-pkg/docs'),
include: '**/*.md' // and docs files, everything as posts
}]
}

4 replies

•Created by FoxCode on 1/28/2025 in #❓・help

Nuxt Content 3 and docus elements

I would like to replace List.vue to make it work with NuxtContent 3. unwrap() no longer exists, and ContentSlot is also gone. How can I update this code to work with NuxtContent 3?

<script lang="ts">
const iconTypeMap = {
  primary: 'heroicons-outline:check',
  info: 'heroicons-outline:information-circle',
  success: 'heroicons-outline:check-circle',
  warning: 'heroicons-outline:exclamation',
  danger: 'heroicons-outline:exclamation-circle'
}

export default defineComponent({
  props: {
    /**
     * Used to override the default <code>type</code> icon, check out the
     *  <a href="https://github.com/nuxt/content/tree/dev/packages/theme-docs/src/components/global/icons">icons available</a>
     */
    icon: {
      type: String,
      default: null
    },
    /**
     * Type of list
     */
    type: {
      type: String,
      default: 'primary',
      validator: (value: string) => ['primary', 'info', 'success', 'warning', 'danger'].includes(value)
    }
  },
  setup (props) {
    const slots = useSlots()

    const { flatUnwrap, unwrap } = useUnwrap()

    const iconName = computed(() => props.icon || (iconTypeMap as any)[props.type])

    // Usage of render function is mandatory to access default slot
    // Otherwise Vue warns that slot "default" was invoked outside of the render function
    return () => {
      const items = flatUnwrap((slots.default && slots.default()) ?? [], ['ul']).map(li => unwrap(li, ['li']))

      return h(
        'ul',
        items.map(item =>
          h('li', [
            h('span', { class: `list-icon ${props.type}` }, h(resolveComponent('icon'), { name: iconName.value, class: 'icon' })),
            h('span', h(resolveComponent('ContentSlot'), { use: () => item }))
          ])
        )
      )
    }
  }
})
</script>

<script lang="ts">
const iconTypeMap = {
  primary: 'heroicons-outline:check',
  info: 'heroicons-outline:information-circle',
  success: 'heroicons-outline:check-circle',
  warning: 'heroicons-outline:exclamation',
  danger: 'heroicons-outline:exclamation-circle'
}

export default defineComponent({
  props: {
    /**
     * Used to override the default <code>type</code> icon, check out the
     *  <a href="https://github.com/nuxt/content/tree/dev/packages/theme-docs/src/components/global/icons">icons available</a>
     */
    icon: {
      type: String,
      default: null
    },
    /**
     * Type of list
     */
    type: {
      type: String,
      default: 'primary',
      validator: (value: string) => ['primary', 'info', 'success', 'warning', 'danger'].includes(value)
    }
  },
  setup (props) {
    const slots = useSlots()

    const { flatUnwrap, unwrap } = useUnwrap()

    const iconName = computed(() => props.icon || (iconTypeMap as any)[props.type])

    // Usage of render function is mandatory to access default slot
    // Otherwise Vue warns that slot "default" was invoked outside of the render function
    return () => {
      const items = flatUnwrap((slots.default && slots.default()) ?? [], ['ul']).map(li => unwrap(li, ['li']))

      return h(
        'ul',
        items.map(item =>
          h('li', [
            h('span', { class: `list-icon ${props.type}` }, h(resolveComponent('icon'), { name: iconName.value, class: 'icon' })),
            h('span', h(resolveComponent('ContentSlot'), { use: () => item }))
          ])
        )
      )
    }
  }
})
</script>

5 replies

•Created by FoxCode on 1/28/2025 in #❓・help

NuxtContent 3, how to change data inside script setup

My code:

const { data: tabs } = await useAsyncData(`usecases`, () => {
    return queryCollection('usecases').all()
})

console.log(tabs.value) // After hot reload returns null

const { data: tabs } = await useAsyncData(`usecases`, () => {
    return queryCollection('usecases').all()
})

console.log(tabs.value) // After hot reload returns null

I would like to take the tabs, use .filter and so on, and then display the processed data on the page. Unfortunately, useAsyncData seems to execute too late. How can this be fixed?

11 replies

•Created by FoxCode on 10/31/2024 in #❓・help

How to use buildCache

No description

4 replies

•Created by FoxCode on 10/30/2024 in #❓・help

Can I use useContent() and ContentRendererMarkdown?

No description

5 replies

•Created by FoxCode on 9/4/2024 in #❓・help

NuxtScripts usage

Is it possible using NuxtScripts to run a script with a component and imports? eg. https://cdn.jsdelivr.net/npm/@img-comparison-slider/[email protected]/dist/index.esm.js

1 replies

•Created by FoxCode on 7/16/2024 in #❓・help

Error but no fail (failOnError: true)

failOnError is set to true, and it always worked fine, but today when generating the page something went wrong, an error appeared and at the same time it did not throw an error but it is visible in the logs, why? The error was an incorrect syntax in the .md file parsed by nuxt-content. Logs:

[2024-07-15T17:37:55.994Z] [error] [unhandledRejection] bad indentation of a mapping entry (11:23)
[2024-07-15T17:37:55.994Z] 
[2024-07-15T17:37:55.994Z]   10 |     date: '2024-07-15'
[2024-07-15T17:37:55.994Z]   11 | link: ""https://github.com/xyz/l ...
[2024-07-15T17:37:55.994Z]   ----------------------------^
[2024-07-15T17:37:55.994Z]   at generateError (node_modules/js-yaml/dist/js-yaml.mjs:1273:10)
[2024-07-15T17:37:55.994Z]   at throwError (node_modules/js-yaml/dist/js-yaml.mjs:1277:9)
[2024-07-15T17:37:55.994Z]   at readBlockMapping (node_modules/js-yaml/dist/js-yaml.mjs:2272:7)
[2024-07-15T17:37:55.994Z]   at composeNode (node_modules/js-yaml/dist/js-yaml.mjs:2531:12)
[2024-07-15T17:37:55.994Z]   at readDocument (node_modules/js-yaml/dist/js-yaml.mjs:2715:3)
[2024-07-15T17:37:55.994Z]   at loadDocuments (node_modules/js-yaml/dist/js-yaml.mjs:2778:5)
[2024-07-15T17:37:55.994Z]   at Object.load$1 [as load] (node_modules/js-yaml/dist/js-yaml.mjs:2804:19)
[2024-07-15T17:37:55.994Z]   at parseFrontMatter (node_modules/remark-mdc/dist/index.mjs:33:21)
[2024-07-15T17:37:55.994Z]   at .nuxt/prerender/chunks/runtime.mjs:2132:50
[2024-07-15T17:37:55.994Z]   at parseMarkdown (.nuxt/prerender/chunks/runtime.mjs:2155:10)

[2024-07-15T17:37:55.994Z] [error] [unhandledRejection] bad indentation of a mapping entry (11:23)
[2024-07-15T17:37:55.994Z] 
[2024-07-15T17:37:55.994Z]   10 |     date: '2024-07-15'
[2024-07-15T17:37:55.994Z]   11 | link: ""https://github.com/xyz/l ...
[2024-07-15T17:37:55.994Z]   ----------------------------^
[2024-07-15T17:37:55.994Z]   at generateError (node_modules/js-yaml/dist/js-yaml.mjs:1273:10)
[2024-07-15T17:37:55.994Z]   at throwError (node_modules/js-yaml/dist/js-yaml.mjs:1277:9)
[2024-07-15T17:37:55.994Z]   at readBlockMapping (node_modules/js-yaml/dist/js-yaml.mjs:2272:7)
[2024-07-15T17:37:55.994Z]   at composeNode (node_modules/js-yaml/dist/js-yaml.mjs:2531:12)
[2024-07-15T17:37:55.994Z]   at readDocument (node_modules/js-yaml/dist/js-yaml.mjs:2715:3)
[2024-07-15T17:37:55.994Z]   at loadDocuments (node_modules/js-yaml/dist/js-yaml.mjs:2778:5)
[2024-07-15T17:37:55.994Z]   at Object.load$1 [as load] (node_modules/js-yaml/dist/js-yaml.mjs:2804:19)
[2024-07-15T17:37:55.994Z]   at parseFrontMatter (node_modules/remark-mdc/dist/index.mjs:33:21)
[2024-07-15T17:37:55.994Z]   at .nuxt/prerender/chunks/runtime.mjs:2132:50
[2024-07-15T17:37:55.994Z]   at parseMarkdown (.nuxt/prerender/chunks/runtime.mjs:2155:10)

1 replies

•Created by FoxCode on 6/18/2024 in #❓・help

How to make only one request when website build

I created plugin like this: https://github.com/nuxt/nuxt.com/blob/main/plugins/stats.ts but i get [error] [nitro] [unhandledRejection] [GET] "https://api.github.com/repos/xyz": 429 too many requests xtimes on yarn generate. I changed $fetch('https://api.nuxt.com/stats') to

 Promise.all([$fetch("https://api.github.com/repos/xyz"), $fetch("https://api.github.com/repos/xyz")]).then((data) => {
                data.forEach((el) => {
                    ghStars.value += el?.stargazers_count || 0
                })
            })

 Promise.all([$fetch("https://api.github.com/repos/xyz"), $fetch("https://api.github.com/repos/xyz")]).then((data) => {
                data.forEach((el) => {
                    ghStars.value += el?.stargazers_count || 0
                })
            })

3 replies

•Created by FoxCode on 6/10/2024 in #❓・help

OnMounted twice

No description

2 replies

•Created by FoxCode on 5/17/2024 in #❓・help

Accordion in nuxt-content

I want to create accordion component for nuxt-content markdown. I thought it would use NuxtUI Accordion (https://ui.nuxt.com/components/accordion) I would like every H2 to be turned into a title in accordion and the rest of the content to be hidden to make markdown look normal, like here:

::accordion
## This is accordion title
This is accordion **content**
1. something
2. something2
## New title here
Hello world
## End
Something here too
::

::accordion
## This is accordion title
This is accordion **content**
1. something
2. something2
## New title here
Hello world
## End
Something here too
::

Or if it is possible to create multiple slots simultaneously:

::accordion
#title
This is **FAQ** title 1
#content
This is content for FAQ-1
#title
This is FAQ title 2
#content
This is content for FAQ-2?
::

::accordion
#title
This is **FAQ** title 1
#content
This is content for FAQ-1
#title
This is FAQ title 2
#content
This is content for FAQ-2?
::

But I don't know how to get to the slots in the normal way, I tried:

<template>
    <div>
        <div class="title">
            <MDCSlot :body="items[0].title" />
        </div>
    </div>
</template>

<script setup>
const slots = useSlots()

const defaultSlotContent = slots.default();

const items = []
let item = {
    title: '',
    body: []
}
defaultSlotContent.forEach((node) => {
    if (node.type.tag == "h2") {
        if (item.title) {
            items.push(item)
            item = { title: '', body: [] }
        }
        item.title = node
    } else {
        item.body.push(node)
    }
})
console.log("items", items)
</script>

<template>
    <div>
        <div class="title">
            <MDCSlot :body="items[0].title" />
        </div>
    </div>
</template>

<script setup>
const slots = useSlots()

const defaultSlotContent = slots.default();

const items = []
let item = {
    title: '',
    body: []
}
defaultSlotContent.forEach((node) => {
    if (node.type.tag == "h2") {
        if (item.title) {
            items.push(item)
            item = { title: '', body: [] }
        }
        item.title = node
    } else {
        item.body.push(node)
    }
})
console.log("items", items)
</script>

but MDCSlot runs the entire $slots.default, and using the same slot name makes it rendered one at a time Or if its not worth doing - can I use slots like this?

::accordion
---
items:
    - 
        label: "What this guide is about"
        slot: "test"
    - label: "Title here"
---
#test
Hello world
::

::accordion
---
items:
    - 
        label: "What this guide is about"
        slot: "test"
    - label: "Title here"
---
#test
Hello world
::

Accordion.vue: <UAccordion :items="items" />

2 replies

•Created by FoxCode on 5/6/2024 in #❓・help

How to use new nuxt-icon with nuxt-ui

When will nuxt-icon be in v1.0.0-beta.1 version for nuxt-ui? Can I somehow use the latest version of nuxt-icon for nuxt-ui?

7 replies

•Created by FoxCode on 5/6/2024 in #❓・help

Cannot use <slot> inside component

I get infinite warn like this:

Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead

Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead

when I create on new nuxt, nuxt-content, nuxt-icon: Section.vue:

<template>
<div>
<ContentSlot name="title" />
<div>
<slot/>
</div>
</div>
</template>

<template>
<div>
<ContentSlot name="title" />
<div>
<slot/>
</div>
</div>
</template>

Container.vue:

<template>
<div>
<slot />
</div>
</template>

<template>
<div>
<slot />
</div>
</template>

index.md:

::section
#title
My title
#default
::::container
Test
::::
::

::section
#title
My title
#default
::::container
Test
::::
::

4 replies

•Created by FoxCode on 3/18/2024 in #❓・help

useRoute not working with static website?

Hi, why class "active" is not working with prerender static website? My reproduction code: https://stackblitz.com/edit/github-xwmppm?file=pages%2Findex.vue Code is like this:

<template>
    <div>
        Current active tab: {{ activeTab }}
        <div>
            buttons:
        </div>
        <button :class="{ 'active': activeTab === 0 }">Button 0</button>
        <button :class="{ 'active': activeTab === 1 }">Button 1</button>
        <button :class="{ 'active': activeTab === 2 }">Button 2</button>
        <button :class="{ 'active': activeTab === 3 }">Button 3</button>
        <button :class="{ 'active': activeTab === 4 }">Button 4</button>
    </div>
</template>

<script setup>
const activeTab = ref(0)
const route = useRoute()
activeTab.value = route.query?.active * 1
</script>

<style scoped>
.active {
    background-color: cyan;
}
</style>

<template>
    <div>
        Current active tab: {{ activeTab }}
        <div>
            buttons:
        </div>
        <button :class="{ 'active': activeTab === 0 }">Button 0</button>
        <button :class="{ 'active': activeTab === 1 }">Button 1</button>
        <button :class="{ 'active': activeTab === 2 }">Button 2</button>
        <button :class="{ 'active': activeTab === 3 }">Button 3</button>
        <button :class="{ 'active': activeTab === 4 }">Button 4</button>
    </div>
</template>

<script setup>
const activeTab = ref(0)
const route = useRoute()
activeTab.value = route.query?.active * 1
</script>

<style scoped>
.active {
    background-color: cyan;
}
</style>

npm run generate
npm run preview

npm run generate
npm run preview

and localhost:3000?active=0 NOT WORKING

npm run dev

npm run dev

and localhost:3000?active=0 WORKING Why and how to fix that?

1 replies

•Created by FoxCode on 7/6/2023 in #❓・help

JavaScript heap out of memory with v3.6.2

I have quite a few .md files using nuxt-content, yarn generate usually took a few minutes, but after upgrading to the latest version of nuxt after a while it throws a JavaScript heap out of memory error. Why is nuxt now consuming so much memory, how to check the memory consumption and can it be optimized somehow FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

1 replies

•Created by FoxCode on 7/6/2023 in #❓・help

Upgrade is not possible with nuxi upgrade and yarn

nuxi upgrade --force at first, it removes yarn.lock, which leads to an error:

Usage Error: The nearest package directory (/home/x/y/website3) doesn't seem to be part of the project declared in /home/x/y.

- If /home/x/y isn't intended to be a project, remove any yarn.lock and/or package.json file there.
- If /home/x/y is intended to be a project, it might be that you forgot to list /website in its workspace configuration.
- Finally, if /home/x/y is fine and you intend /website to be treated as a completely separate project (not even a workspace), create an empty yarn.lock file in it.

Usage Error: The nearest package directory (/home/x/y/website3) doesn't seem to be part of the project declared in /home/x/y.

- If /home/x/y isn't intended to be a project, remove any yarn.lock and/or package.json file there.
- If /home/x/y is intended to be a project, it might be that you forgot to list /website in its workspace configuration.
- Finally, if /home/x/y is fine and you intend /website to be treated as a completely separate project (not even a workspace), create an empty yarn.lock file in it.

I use the last option, /website is a completely separate project in monorepo. How can I fix it?

1 replies

•Created by FoxCode on 6/7/2023 in #❓・help

Sourcemap for "[...]/components/content/Component.vue" points to missing source files

When I updated Nuxt to the latest version WARNs appear to me:

WARN Sourcemap for "[...]/components/content/Component.vue" points to missing source files
WARN Sourcemap for "[...]/components/content/ComponentX.vue" points to missing source files

WARN Sourcemap for "[...]/components/content/Component.vue" points to missing source files
WARN Sourcemap for "[...]/components/content/ComponentX.vue" points to missing source files

etc. How do I turn it off, or fix it?

1 replies

•Created by FoxCode on 3/10/2023 in #❓・help

Reduce unused javascript (nuxt)

No description

30 replies

•Created by FoxCode on 1/26/2023 in #❓・help

Detect new deploy

Hey, is the issue of changing chunks during deploy fixed? Currently when a user is on the site during deploy, the files change and he gets a 404. Is there any ready way in nuxt 3 to force a refresh or something like that?

1 replies