I've tried to use the stepper component to create a stepper into my nuxt app.
The stepper is correctly loaded, but there is an error in the console : expose() should be called only once per setup(). But I haven't used any expose() function.
By removing the UStepper component, everything works.
Here is my code :
<template>
<div class="w-screen bg-slate-100 dark:bg-slate-900">
<div class="container mx-auto py-12 mt-20">
<h2 id="working" class="text-center mb-20">How it works</h2>
<div class="container mx-auto py-12 mt-20">
<UStepper :items="items" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { StepperItem } from '@nuxt/ui';
const items = ref<StepperItem[]>([
{
title: 'Address',
description: 'Add your address here',
icon: 'i-lucide-house',
},
{
title: 'Shipping',
description: 'Set your preferred shipping method',
icon: 'i-lucide-truck',
},
{
title: 'Checkout',
description: 'Confirm your order',
},
]);
</script>
Here is the entire error :
WARN [Vue warn]: expose() should be called only once per setup().
at <StepperRoot orientation="horizontal" linear=true modelValue=0 ... >
at <Stepper items= [ { title: 'Address', description: 'Add your address here', icon: 'i-lucide-house' },
{ title: 'Shipping',
description: 'Set your preferred shipping method',
icon: 'i-lucide-truck' },
{ title: 'Checkout', description: 'Confirm your order' } ] class="w-full" >
at <LandingPageWorking>
at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouteProvider vnode= { __v_isVNode: true,
__v_skip: true,
type:
{ __name: 'index',
setup: [Function (anonymous)],
ssrRender: [Function: _sfc_ssrRender],
__file:
'/Users/josselinarnaud/Documents/personnel/dev/personnel/url-shortener-frontend/App/pages/index.vue' },
props:
{ onVnodeUnmounted: [Function: onVnodeUnmounted],
ref:
RefImpl {
dep: [Dep],
__v_isRef: true,
__v_isShallow: false,
_rawValue: undefined,
_value: undefined } },
key: null,
ref:
{ i:
{ uid: 8,
vnode: [Object],
type: [Object],
parent: [Object],
appContext: [Object],
root: [Object],
next: null,
subTree: [Object],
effect: null,
update: null,
job: null,
scope: [EffectScope],
render: [Function (anonymous)],
proxy: [Object],
exposed: null,
exposeProxy: null,
withProxy: null,
provides: [Object <Complex prototype>],
ids: [Array],
accessCache: [Object: null prototype] {},
renderCache: [],
components: null,
directives: null,
propsOptions: [Array],
emitsOptions: null,
emit: [Function: bound emit],
emitted: null,
propsDefaults: [Object: null prototype] {},
inheritAttrs: false,
ctx: [Object],
data: {},
props: [Object],
attrs: {},
slots: [Object],
refs: {},
setupState: {},
setupContext: [Object],
suspense: null,
suspenseId: 0,
asyncDep: null,
asyncResolved: false,
isMounted: false,
isUnmounted: false,
isDeactivated: false,
bc: null,
c: null,
bm: null,
m: null,
bu: null,
u: null,
um: null,
bum: null,
da: null,
a: null,
rtg: null,
rtc: null,
ec: null,
sp: null },
r:
RefImpl {
dep: [Dep],
__v_isRef: true,
__v_isShallow: false,
_rawValue: undefined,
_value: undefined },
k: undefined,
f: false },
scopeId: null,
slotScopeIds: null,
children: null,
component: null,
suspense: null,
ssContent: null,
ssFallback: null,
dirs: null,
transition: null,
el: null,
anchor: null,
target: null,
targetStart: null,
targetAnchor: null,
staticCount: 0,
shapeFlag: 4,
patchFlag: 0,
dynamicProps: null,
dynamicChildren: null,
appContext: null,
ctx:
<ref *1> {
uid: 8,
vnode:
{ __v_isVNode: true,
__v_skip: true,
type: [Object],
props: [Object],
key: null,
ref: null,
scopeId: null,
slotScopeIds: null,
children: [Object],
component: [Circular *1],
suspense: null,
ssContent: null,
ssFallback: null,
dirs: null,
transition: null,
el: null,
anchor: null,
target: null,
targetStart: null,
targetAnchor: null,
staticCount: 0,
shapeFlag: 36,
patchFlag: 0,
dynamicProps: null,
dynamicChildren: null,
appContext: null,
ctx: [Object] },
type:
{ name: 'RouterView',
inheritAttrs: false,
props: [Object],
compatConfig: [Object],
setup: [Function: setup] },
parent:
{ uid: 7,
vnode: [Object],
type: [Object],
parent: [Object],
appContext: [Object],
root: [Object],
next: null,
subTree: [Object],
effect: null,
update: null,
job: null,
scope: [EffectScope],
render: [Function (anonymous)],
proxy: [Object],
exposed: [Object],
exposeProxy: null,
withProxy: null,
provides: [Object <Complex prototype>],
ids: [Array],
accessCache: [Object: null prototype] {},
renderCache: [],
components: null,
directives: null,
propsOptions: [Array],
emitsOptions: null,
emit: [Function: bound emit],
emitted: null,
propsDefaults: [Object: null prototype] {},
inheritAttrs: false,
ctx: [Object],
data: {},
props: [Object],
attrs: {},
slots: {},
refs: {},
setupState: {},
setupContext: [Object],
suspense: null,
suspenseId: 0,
asyncDep: null,
asyncResolved: false,
isMounted: false,
isUnmounted: false,
isDeactivated: false,
bc: null,
c: null,
bm: null,
m: null,
bu: null,
u: null,
um: null,
bum: null,
da: null,
a: null,
rtg: null,
rtc: null,
ec: null,
sp: null },
appContext:
{ app: [Object],
config: [Object],
mixins: [],
components: [Object],
directives: {},
provides: [Object: null prototype],
optionsCache: [WeakMap],
propsCache: [WeakMap],
emitsCache: [WeakMap] },
root:
<ref *2> {
uid: 0,
vnode: [Object],
type: [Object],
parent: null,
appContext: [Object],
root: [Circular *2],
next: null,
subTree: null,
effect: null,
update: null,
job: null,
scope: [EffectScope],
render: [Function: NOOP],
proxy: {},
exposed: {},
exposeProxy: null,
withProxy: null,
provides: [Object <Complex prototype>],
ids: [Array],
accessCache: [Object: null prototype] {},
renderCache: [],
components: null,
directives: null,
propsOptions: [],
emitsOptions: null,
emit: [Function: bound emit],
emitted: null,
propsDefaults: [Object: null prototype] {},
inheritAttrs: undefined,
ctx: {},
data: {},
props: {},
attrs: {},
slots: {},
refs: {},
setupState: [Object],
setupContext: [Object],
suspense: null,
suspenseId: 0,
asyncDep: null,
asyncResolved: false,
isMounted: false,
isUnmounted: false,
isDeactivated: false,
bc: null,
c: null,
bm: null,
m: null,
bu: null,
u: null,
um: null,
bum: null,
da: null,
a: null,
rtg: null,
rtc: null,
ec: [Array],
sp: null,
devtoolsRawSetupState: [Object] },
next: null,
subTree:
{ __v_isVNode: true,
__v_skip: true,
type: [Object],
props: [Object],
key: null,
ref: null,
scopeId: null,
slotScopeIds: null,
children: [Object],
component: null,
suspense: null,
ssContent: [Object],
ssFallback: [Object],
dirs: null,
transition: null,
el: null,
anchor: null,
target: null,
targetStart: null,
targetAnchor: null,
staticCount: 0,
shapeFlag: 160,
patchFlag: 0,
dynamicProps: null,
dynamicChildren: null,
appContext: null,
ctx: [Object] },
effect: null,
update: null,
job: null,
scope:
EffectScope {
detached: true,
_active: true,
_on: 0,
effects: [],
cleanups: [],
_isPaused: false,
parent: undefined,
prevScope: undefined },
render: [Function (anonymous)],
proxy: { name: [Getter/Setter], route: [Getter/Setter] },
exposed: null,
exposeProxy: null,
withProxy: null,
provides:
Object <Object <Complex prototype>> {
[Symbol(router view depth)]: [ComputedRefImpl],
[Symbol(router view location matched)]: [ComputedRefImpl],
[Symbol(router view location)]: [ComputedRefImpl] },
ids: [ '0-', 2, 2 ],
accessCache: [Object: null prototype] {},
renderCache: [],
components: null,
directives: null,
propsOptions: [ [Object], [Array] ],
emitsOptions: null,
emit: [Function: bound emit],
emitted: null,
propsDefaults: [Object: null prototype] {},
inheritAttrs: false,
ctx: { name: [Getter/Setter], route: [Getter/Setter] },
data: {},
props: { route: undefined, name: 'default' },
attrs: {},
slots: { default: [Function] },
refs: {},
setupState: {},
setupContext: { attrs: [Getter], slots: [Getter], emit: [Getter], expose: [Function: expose] },
suspense: null,
suspenseId: 0,
asyncDep: null,
asyncResolved: false,
isMounted: false,
isUnmounted: false,
isDeactivated: false,
bc: null,
c: null,
bm: null,
m: null,
bu: null,
u: null,
um: null,
bum: null,
da: null,
a: null,
rtg: null,
rtc: null,
ec: null,
sp: null } } route= { fullPath: '/',
hash: '',
query: {},
name: 'index',
path: '/',
params: {},
matched:
[ { path: '/',
redirect: undefined,
name: 'index',
meta: {},
aliasOf: undefined,
beforeEnter: undefined,
props: [Object],
children: [],
instances: {},
leaveGuards: Set(0) {},
updateGuards: Set(0) {},
enterCallbacks: {},
components: [Object] } ],
meta: {},
redirectedFrom: undefined,
href: '/' } vnodeRef=Ref< undefined > >
at <RouterView name=undefined route=undefined >
at <NuxtPage>
at <Default ref=Ref< undefined > >
at <AsyncComponentWrapper ref=Ref< undefined > >
at <LayoutLoader key="default" layoutProps= { ref:
RefImpl {
dep:
Dep {
computed: undefined,
version: 0,
activeLink: undefined,
subs: undefined,
map: undefined,
key: undefined,
sc: 0,
subsHead: undefined },
__v_isRef: true,
__v_isShallow: true,
_rawValue: undefined,
_value: undefined } } name="default" >
at <NuxtLayoutProvider layoutProps= { ref:
RefImpl {
dep:
Dep {
computed: undefined,
version: 0,
activeLink: undefined,
subs: undefined,
map: undefined,
key: undefined,
sc: 0,
subsHead: undefined },
__v_isRef: true,
__v_isShallow: true,
_rawValue: undefined,
_value: undefined } } key="default" name="default" ... >
at <NuxtLayout >
at <App>
at <NuxtRoot>
WARN [nuxt] Failed to stringify dev server logs. Received DevalueError: Cannot stringify a function. You can define your own reducer/reviver for rich types following the instructions in https://nuxt.com/docs/api/composables/use-nuxt-app#payload.```
