Skip nav


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.

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();

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":, // 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.

© 2022 - made with ♥ by Florian Gasquez - Powered by vue/vite/fyvue & tailwindcss.