Konsta UI & Framework7

Create Framework7 Project
Install Tailwind CSS & Konsta UI
KonstaProvider
Usage
Example Page
Dark Mode
Color Theme

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

Create Framework7 Project

First, create a Framework7 Vue project using Framework7 CLI

Install Tailwind CSS & Konsta UI

Now in created Framework7 project, we need to install Tailwind CSS & Konsta UI:

npm i tailwindcss konsta

There is a postcss.config.js file in the project root, we need to add there tailwindcss plugin:

module.exports = {
  plugins: {
    tailwindcss: {}, // <- add this
    'postcss-preset-env': {},
  },
};

Create tailwind.config.js file and add it to the project root folder with the following content:

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

module.exports = konstaConfig({
  content: ['./src/**/*.{js,jsx,ts,tsx,vue}', './src/index.html'],
  darkMode: 'class',
});

Include Tailwind CSS to your app's styles. Add the following code in the beginning of your src/css/app.[css|scss|less]:

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

KonstaProvider

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

We need to wrap main Framework7's App component with KonstaProvider in the src/components/app.vue:

<template>
  <!-- Wrap Framework7's App with KonstaProvider with theme="parent" -->
  <k-provider theme="parent">
    <f7-app v-bind="f7params"> ... </f7-app>
  </k-provider>
</template>
<script>
  import { konstaProvider } from 'konsta/vue';
  import { f7App /* ... */ } from 'framework7-vue';

  export default {
    components: {
      konstaProvider,
      f7App,
    },
    setup() {
      const f7params = {
        theme: 'ios',
        // ...
      };

      return {
        f7params,
      };
    },
  };
</script>

Usage

Framework7 has very powerful and flexible router, and to keep it work correctly we need to use Router-related components from Framework7: App, View, Page, Navbar, Toolbar.

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 Framework7 page components.

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

<template>
  <!-- Use Page, Navbar & Toolbar from Framework7 -->
  <f7-page name="home">
    <f7-navbar title="My App" large />
    <f7-toolbar bottom>
      <k-link toolbar>Left Link</k-link>
      <k-link toolbar>Right Link</k-link>
    </f7-toolbar>
    <!-- In page content we can use Konsta UI components -->
    <k-block strong>
      <p>
        Here is your Framework7 & 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>
  </f7-page>
</template>
<script>
  // Use Page, Navbar, Toolbar from Framework7
  import { f7Page, f7Navbar, f7Toolbar } from 'framework7-vue';
  // Konsta UI components
  import {
    kBlock,
    kButton,
    kList,
    kListItem,
    kLink,
    kBlockTitle,
  } from 'konsta/vue';

  export default {
    components: {
      f7Page,
      f7Navbar,
      f7Toolbar,
      kBlock,
      kButton,
      kList,
      kListItem,
      kLink,
      kBlockTitle,
    },
  };
</script>

As a result we should see the following page:

Dark Mode

Pay attention that Tailwind CSS requires class dark to be added to enable Dark mode, while Framework7 (version 6) requires class theme-dark. Framework7 version 7 requires same dark class for dark mode.

So if you use dark mode, make sure you set/remove both dark theme-dark classes on root element (preferably on <html> element).

Color Theme

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

Color	Framework7 CSS Var	Konsta UI Prop
primary	`--f7-theme-color`	`primary`
primary dark	`--f7-theme-color-shade`	`primary-dark`
primary light	`--f7-theme-color-tint`	`primary-light`

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

In app.css (to configure Framework7 theme color):

:root {
  --f7-theme-color: #ff6b22;
  --f7-theme-color-rgb: 255, 107, 34;
  --f7-theme-color-shade: #f85200;
  --f7-theme-color-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}', './src/index.html'],
  darkMode: 'class',
  // extend primary color
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#ff864b',
          DEFAULT: '#ff6b22',
          dark: '#f85200',
        },
      },
    },
  },
});