App Vue Component

App Vue component is the main app component that allows to define global theme (iOS or Material) and other useful globals.

If you use Tailwind Mobile with other framework (like Framework7 or Ionic), you should use TailwindMobileProvider instead.

App Components

There are following components included:

  • App

App Props

NameTypeDefaultDescription
componentstring'div'

Component's HTML Element

darkbooleanfalse

Include dark: variants (if dark theme is in use)

safeAreasbooleantrue

Adds safe-areas class to the container. Should be enabled if app container is the full screen element to properly handle screen safe areas

theme'ios' | 'material' | 'parent''material'

App theme. If set to 'parent' it will look for ios or md class on root <html> element, useful to use with parent framework like Framework7 or Ionic

touchRipplebooleantrue

Enables touch ripple effect in Material theme. Allows to globally disable touch ripple for all components

Examples

App component should be used as main wrapper for all Tailwind Mobile components, and there should be only one App component at a time in the app:

<template>
  <!-- App component ideally should be the main root component -->
  <twm-app theme="ios" safe-areas>
    <!-- rest of Tailwind Mobile components -->
  </tmw-app>
</template>
<script>
import { twmApp } from 'tailwind-mobile/vue';

export default {
  components: {
    twmApp,
  },
};
</script>
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.