App

Wraps your app to provide global configurations and more.

Demo

No demo

Related Components

This requires the following components to be installed:

• Toaster
• OverlayProvider

Related Keys

This requires the following keys to be installed:

• portal-target

Component

App.vue

<script lang="ts">
import type { ToasterProps } from '@/ui/components/Toaster.vue'
import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
import OverlayProvider from '@/ui/components/OverlayProvider.vue'
import Toaster from '@/ui/components/Toaster.vue'
import { portalTargetInjectionKey } from '@/ui/keys/portal-target'
import { reactivePick } from '@vueuse/shared'
import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
import { provide, toRef, useId } from 'vue'

export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
  tooltip?: TooltipProviderProps
  toaster?: ToasterProps | null
  portal?: string | HTMLElement
}

export interface AppSlots {
  default: (props?: object) => any
}

export default {
  name: 'App',
}
</script>

<script setup lang="ts">
const props = withDefaults(defineProps<AppProps>(), {
  portal: 'body',
})

defineSlots<AppSlots>()

const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
const tooltipProps = toRef(() => props.tooltip)
const toasterProps = toRef(() => props.toaster)

const portal = toRef(() => props.portal)
provide(portalTargetInjectionKey, portal)
</script>

<template>
  <ConfigProvider :use-id="() => (useId() as string)" v-bind="configProviderProps">
    <TooltipProvider v-bind="tooltipProps">
      <Toaster v-if="toaster !== null" v-bind="toasterProps">
        <slot />
      </Toaster>
      <slot v-else />

      <OverlayProvider />
    </TooltipProvider>
  </ConfigProvider>
</template>

App.vue

<script lang="ts">
import type { ToasterProps } from '@/UI/Components/Toaster.vue'
import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
import OverlayProvider from '@/UI/Components/OverlayProvider.vue'
import Toaster from '@/UI/Components/Toaster.vue'
import { portalTargetInjectionKey } from '@/UI/Keys/portal-target'
import { reactivePick } from '@vueuse/shared'
import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
import { provide, toRef, useId } from 'vue'

export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
  tooltip?: TooltipProviderProps
  toaster?: ToasterProps | null
  portal?: string | HTMLElement
}

export interface AppSlots {
  default: (props?: object) => any
}

export default {
  name: 'App',
}
</script>

<script setup lang="ts">
const props = withDefaults(defineProps<AppProps>(), {
  portal: 'body',
})

defineSlots<AppSlots>()

const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
const tooltipProps = toRef(() => props.tooltip)
const toasterProps = toRef(() => props.toaster)

const portal = toRef(() => props.portal)
provide(portalTargetInjectionKey, portal)
</script>

<template>
  <ConfigProvider :use-id="() => (useId() as string)" v-bind="configProviderProps">
    <TooltipProvider v-bind="tooltipProps">
      <Toaster v-if="toaster !== null" v-bind="toasterProps">
        <slot />
      </Toaster>
      <slot v-else />

      <OverlayProvider />
    </TooltipProvider>
  </ConfigProvider>
</template>

Theme

app.ts

export default {}

View Nuxt UI theme

app.ts

export default {}

Test

To test this component, you can use the following test file:

App.test.ts

import { expect, it } from 'vitest'

// No tests for this component
it('passes', () => {
  expect(true).toBe(true)
})

App.test.ts

import { expect, it } from 'vitest'

// No tests for this component
it('passes', () => {
  expect(true).toBe(true)
})

Contributors

barbapapazes

Changelog