AppBase

The AppBase component ist the starting point for all interkit apps and needs to be the outermost component you add to any project.

If you are creating a multilanguage project, see the internationalisation guide for setting the languages parameter.

AppBaseAdvanced

AppBaseAdvanced provides additional options to AppBase.

desktopFallback slot

If you intend your Interkit app to be used exclusively on mobile devices, you can force desktop devices to show this fallback view.

Desktop devices means “large viewports” here. We use a media query to identify them on page load; you can override the default min-width: 600px using the desktopFallbackMinWidth prop.

The slot takes anything, but we have a special component called DesktopFallback

A DesktopFallback example

DesktopFallback component

A splash page with rich content, arranged in a grid intended for wider viewports.

  • Title + intro text
  • QR code with a link to the web app — not auto-generated, you have to provide it yourself
  • A “go fullscreen” button — basically deactivates/circumvents the large viewport detection and takes you to the web app’s default view/slot
  • Multi purpose buttons — e.g. links to contact, legal info, privacy policy
  • A preview of the web app, fully functional — an iframe styled with a “device bezel” border
Developer docs

AppBase

Props

Prop Type Default Description
languages*

Slots

Name Default Props Fallback
Yes

AppBaseAdvanced

Props

Prop Type Default Description
projectIdOverride*
languages*

Slots

Name Default Props Fallback
Yes
desktopFallback No
networkHint No
viewport No

DesktopFallback

Props

Prop Type Default Description
qrHint*
fullscreenHint*
fullscreenButtonText*
qrImageSrc*
text*
title*
iframeWidth string '340px'
iframeHeight string '720px'

Slots

Name Default Props Fallback
buttons No
content No <h1 class="text-headline DesktopFallback__TextHeadline">{$showDummyData ? 'dummy title' : title}</h1>
<p class="text-text DesktopFallback__Text">{$showDummyData ? dummyLorem1Paragraph : text}</p>