Nuxt UIKit

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces

This tutorial looks at the installation and setup for version 3 (v3.x.x) of the nuxt-uikit module for use with Nuxt3 Applications. The @fedorae/nuxt-uikit module makes it super easy to add the UIkit framework to your next Nuxt app.

Installation

1. Add @fedorae/nuxt-uikit dependency to your project

pnpm add -D @fedorae/nuxt-uikit

2. Add @fedorae/nuxt-uikit to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@fedorae/nuxt-uikit'],
})

Example app.vue

<template>
  <div class="uk-flex uk-flex-middle uk-flex-center uk-height-viewport">
    <div class="uk-card uk-card-default uk-width-1-2@m">
      <div class="uk-card-header">
        <div class="uk-grid-small uk-flex-middle" uk-grid>
          <div class="uk-width-auto">
            <img
              class="uk-border-circle"
              width="40"
              height="40"
              src="https://github.com/fedorae-com/nuxt-uikit/raw/main/docs/public/cover.png"
              alt="Logo"
            />
          </div>
          <div class="uk-width-expand">
            <h3 class="uk-card-title uk-margin-remove-bottom">Nuxt UIkit</h3>
          </div>
        </div>
      </div>
      <div class="uk-card-body">
        <p>
          This module makes it super easy to add the UIKit framework to your
          Nuxt application.
        </p>
      </div>
      <div class="uk-card-footer">
        <a
          href="https://github.com/fedorae-com/nuxt-uikit"
          target="_blank"
          class="uk-button uk-button-text"
          >Read more</a
        >
      </div>
    </div>
  </div>
</template>

Start Dev Server

pnpm run dev

Docs

https://nuxt-uikit.fedorae.com

Still on Nuxt 2

See Nuxt 2 setup here: installing-nuxt-uikit-module-in-a-nuxtjs-app