Konsta UI & Ionic

• Create Ionic Project
• Install Tailwind CSS
• Tailwind CSS Styles
• Install Konsta UI
• KonstaProvider
• Usage
• Example Page
• Color Theme

Let's see how to use Konsta UI Vue components with Ionic Vue.

Create Ionic Project

First, create an Ionic Vue project.

Install Tailwind CSS

If Ionic Vue project was generated with Ionic CLI, it actually creates a Vue CLI project.

So to install Tailwind CSS, we can follow official Tailwind CSS installation guide

Tailwind CSS Styles

Create a src/App.css file with the following content to include Tailwind CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Install Konsta UI

Now, we can install Konsta UI:

npm i konsta

And in your tailwind.config.js file we should extend config with Konsta UI's config:

const konstaConfig = require('konsta/config');

module.exports = konstaConfig({
  content: ['./src/**/*.vue', './src/*.vue'],
});

KonstaProvider

Now we need to setup KonstaProvider so we can set some global parameters (like theme).

We need to wrap main Ionic's IonApp component with KonstaProvider in the src/App.tsx:

<template>
  <!-- Wrap IonApp with KonstaProvider with theme="parent" -->
  <k-provider theme="parent">
    <ion-app>
      <ion-router-outlet />
    </ion-app>
  </k-provider>
</template>

<script lang="ts">
  import { konstaProvider } from 'konsta/vue';
  import { IonApp, IonRouterOutlet } from '@ionic/vue';
  import { defineComponent } from 'vue';
  import './App.css';

  export default defineComponent({
    name: 'App',
    components: {
      IonApp,
      IonRouterOutlet,
      konstaProvider,
    },
  });
</script>

Usage

To keep Ionic router work correctly we need to use Router-related components from Ionic: IonApp, IonReactRouter, IonPage, IonHeader, IonFooter, IonToolbar.

The rest of components (if there is a Konsta UI alternative) can be taken from Konsta UI (konsta/vue)

Example Page

Now when everything is set up, we can use Konsta UI Vue components in Ionic page components.

For example, let's open src/pages/Home.tsx and change it to the following:

<template>
  <!-- Use IonPage, IonHeader, IonFooter & IonToolbar from Ionic -->
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>My App</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-footer>
      <ion-toolbar>
        <k-link slot="start" toolbar>
          Link 1
        </k-link>
        <k-link slot="end" toolbar>
          Link 2
        </k-link>
      </ion-toolbar>
    </ion-footer>

    <ion-content fullscreen>
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">My App</ion-title>
        </ion-toolbar>
      </ion-header>

      <!-- In page content we can use Konsta UI components -->
      <k-block strong>
        <p>
          Here is your Ionic & Konsta UI app. Let's see what we have
          here.
        </p>
      </k-block>
      <k-block-title>Navigation</k-block-title>
      <k-list>
        <k-list-item href="/about/" title="About" />
        <k-list-item href="/form/" title="Form" />
      </k-list>

      <k-block strong class="flex space-x-4">
        <k-button>Button 1</k-button>
        <k-button>Button 2</k-button>
      </k-block>
    </ion-content>
  </ion-page>
</template>
<script>
import {
  IonContent,
  IonHeader,
  IonFooter,
  IonPage,
  IonTitle,
  IonToolbar,
} from '@ionic/vue';
import {
  kBlock,
  kButton,
  kList,
  kListItem,
  kBlockTitle,
  kLink,
} from 'konsta/vue';

export default {
  components: {
    IonContent,
    IonHeader,
    IonFooter,
    IonPage,
    IonTitle,
    IonToolbar,
    kBlock,
    kButton,
    kList,
    kListItem,
    kBlockTitle,
    kLink,
  }
}

</script>

As a result we should see the following page:

Color Theme

Ionic and Konsta UI use different sources for main theme color. While Ionic's theme color is configured via CSS custom properties, Konsta UI theme should be set in tailwind.config.js.

Let's say our theme color is #ff6b22, we need to set the following:

In App.css (to configure Ionic theme color):

:root {
  --ion-color-primary: #ff6b22;
  --ion-color-primary-rgb: 255, 107, 34;
  --ion-color-primary-shade: #f85200;
  --ion-color-primary-tint: #ff864b;
}

And in tailwind.config.js (to configure Konsta UI theme color):

const konstaConfig = require('konsta/config');

module.exports = konstaConfig({
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  // extend primary color
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#ff864b',
          DEFAULT: '#ff6b22',
          dark: '#f85200',
        },
      },
    },
  },
});