TheAppWrapper

This component is a utility that will be included into the corresponding project in which this design system will be used, once. It wraps the whole application in order to manage the overall root-size and theming of the project, either by passing the corresponding properties to the component directly or by passing them via URL queries (if enabled by property).

// App.vue

<script setup lang="ts">
import { TheAppWrapper } from '@pohlcon/design-system';
import Welcome from './views';
</script>

<template>
  <TheAppWrapper size="medium">
    <Welcome />
    ...
  </TheAppWrapper>
</template>

Properties

export interface TheAppWrapperProps {
    /** */
    company?: Company;
    /** */
    size?: Size;
    /** */
    blockOnMobile?: boolean;
    /**
     * only to be used when `vue-router` is installed, otherwise explicitly set to **false**!
    */
    useQuery?: boolean;
}

export type Size =
  | 'small'
  | 'medium'
  | 'big';

By default the routing of modern vue applications is handled by the official vue-router dependency. If it is installed in your project, you can set useQuery not to be false and TheAppWrapper will enable your app to parse the URL for the specific queries size and theme and will apply the corresponding values to your app. This is optional so TheAppWrapper can also be used for SSR frontend applications, i.e. VitePress, Nuxt, etc.

Furthermore TheAppWrapper enables blocking an application on mobile devices. If you wish to use this feature you need to set blockOnMobile to true and need to have vue-i18n properly installed and setup (you may need to setup the corresponding plugin, if you use Vite).