Kal
Unable to trap focus within a Nuxt UI Drawer
I have buttons inside a drawer, and when opening the drawer, page focus is not on the drawer, instead I can see focus changing on background elements as I hit tab. Eventually hitting tab enough times brings the focus onto the drawer content.
What needs to be done to get:
1. Focus to be on the first element in the drawer when it opens
2. Focus to remain trapped within the drawer while it's open
9 replies
UDrawer with inset doesn't fully animate off the edge of screen
Given NuxtUI's drawer (
UDrawer) with the inset option...
When closing the drawer, the drawer does not animate fully off the screen. Instead, as an end-user, I see the drawer animate to zero but is still visible for a moment, before ultimately just disappearing.
Instead, the drawer should fully animate off the screen, just like when not using inset.
Is this a bug or is my implementation wrong?
Sample instance:
<UDrawer id="myDrawer"
v-model:open="store.myDrawer"
direction="top"
inset
class="myDrawer">
<template #content>
<div class="p-4 min-h-32 flex flex-col gap-4 overflow-hidden">
<SomeComponent />
</div>
</template>
</UDrawer>7 replies
In nuxt, where to specify compile-time flags?
With a Vue+Vite app, you can specify some compile-time flags like below.
For instance, I never use Options API, and apparently disabling it saves ~10kb off your final build.
How can I do the same in Nuxt?
import { defineConfig } from 'vite'
export default defineConfig({
define: {
__VUE_OPTIONS_API__: 'false'
}
})5 replies
How to get a rich text editor in Nuxt Content/Nuxt Studio
I'm not interested in markdown, instead I'd like a rich text HTML editor as you'd find in a regular CMS's.
Is this possible?
What about a Vue component that wraps a an editor? Is that what I should be doing?
5 replies
How to get page title globally when using useHead() ?
useHead() seems to be strongly recommended for setting page titles & other meta, great, it works... but how can I access the current page meta data globally, in any component? Previously I used some form of
{{ route.meta.title }} to do so, however, route.meta doesn't seem to be affected by changes made with useHead(). Use cases: a global header component, or perhaps some kind of breadcrumb component living in a layout. I literally just need the current page title, anywhere.4 replies