Konsta UI & Nuxt

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

Contents

• Create Nuxt Project
• Install Tailwind CSS
• Install Konsta UI
• App Component
• Example Page

Create Nuxt Project

First, create a Nuxt project

Install Tailwind CSS

We can follow official Install Tailwind CSS with Nuxt

Install Konsta UI

Now in created Nuxt project, we need to install Konsta UI:

npm i konsta

And in your main CSS file we should import Konsta UI's theme file:

@import 'tailwindcss';
/* import Konsta UI theme */
@import 'konsta/vue/theme.css';

App Component

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

We need to wrap whole app with App in the ./app.vue:

<template>
  <!-- Wrap our app with App component -->
  <k-app theme="ios">
    <NuxtPage />
  </k-app>
</template>

<script>
  import { kApp } from 'konsta/vue';
  import './assets/main.scss';

  export default {
    components: {
      kApp,
    },
  };
</script>

Example Page

Now when everything is set up, we can use Konsta UI Vue components in our Nuxt pages.

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

<template>
  <k-page>
    <k-navbar title="My App" />

    <k-block strong>
      <p>Here is your Nuxt & 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>
  </k-page>
</template>
<script>
  // Konsta UI components
  import {
    kPage,
    kNavbar,
    kBlock,
    kButton,
    kList,
    kListItem,
    kLink,
    kBlockTitle,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kBlock,
      kButton,
      kList,
      kListItem,
      kLink,
      kBlockTitle,
    },
  };
</script>

As a result we should see the following page: