FoxCode Posts - Answer Overflow

FoxCode

•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

NNuxt

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

OnMounted twice

2 replies

NNuxt

•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

NNuxt

•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

NNuxt

•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

NNuxt

•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

NNuxt

•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

NNuxt

•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

NNuxt

•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

NNuxt

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

Reduce unused javascript (nuxt)

30 replies

NNuxt

•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

Gaming

Programming