Installation

Prerequisites

Before you can install the Froeschke UI library, you need to have your package manager set up, to use npm.froeschke.net as registry for the @froeschke scope.

Install the package

yarn add @froeschke/ui

Frameworks

Nuxt

To use Froeschke UI with Nuxt, you need to do the following steps:

Add the package to your nuxt.config.js file in the build.transpile array:

export default defineNuxtConfig({
  build: {
    transpile: ["@froeschke/ui"],
  },
});

Create a plugin file in the plugins directory, for example ui.ts:

import FroeschkeUI from "@froeschke/ui";

export default defineNuxtPlugin((app) => {
  app.vueApp.use(FroeschkeUI);
});

Configure TailwindCSS in your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "components/**/*.{vue,js,jsx,mjs,ts,tsx}",
    "layouts/**/*.{vue,js,jsx,mjs,ts,tsx}",
    "pages/**/*.{vue,js,jsx,mjs,ts,tsx}",
    "plugins/**/*.{js,ts,mjs}",
    "composables/**/*.{js,ts,mjs}",
    "utils/**/*.{js,ts,mjs}",
    "{A,a}pp.{vue,js,jsx,mjs,ts,tsx}",
    "{E,e}rror.{vue,js,jsx,mjs,ts,tsx}",
    "app.config.{js,ts,mjs}",
    "app/spa-loading-template.html",
    "node_modules/@froeschke/ui/dist/**/*.{vue,js,jsx,mjs,ts,tsx}", 
  ],
};