fyvue

fyvue is a Vue Plugin providing components, helpers for Vue, Tailwind, Vite (SSR), KLB API, and more. At some point in the future, it will do my job for me.

This documentation is not up to date. You should check starters templates instead:
fyvue -> https://github.com/fyvue/fyvue
fyvue + klb -> https://github.com/fyvue/klb-starter

Getting started

First you'll need to install fyvue.

yarn add @karpeleslab/fyvue

Then activate fyvue plugin in main.ts

import { createFyvue } from "@karpeleslab/fyvue";
import { createHead } from '@vueuse/head';
import { createPinia } from 'pinia';
import { createApp } from "vue";
const app = createApp(App);
const fyvue = createFyvue();
app.use(head);
app.use(pinia);
app.use(fyvue);
//...
app.mount('#app')

A little bit of Tailwind config is required for fyvue to work correctly.

const colors = require("tailwindcss/colors");
module.exports = {
  // add darkMode:"" if you want dark mode support,
  // if not just add class="light" to your index.html.
  darkMode: "class",
  //...
  theme: {
    extend: {
      //...
      colors: {
        "fv-primary": colors.blue, // main color, blue is a good choice ^^
        "fv-neutral": colors.slate, // neutral color slate/gray/bronze/neutral for example
      },
    },
  },
  //...
};

For typescript you can add the following to your tsconfig.json

"types": ["vite/client", "@karpeleslab/fyvue/dist/components"],

Components List

List of all documented fyvue components.

UI Components

Collection of Vue components (using TailwindCSS).

Klb Components

Collection of Vue components working with KLB API.

Misc Components

Collection of Vue components and utilities.