Installation

Pre-requisites

1. First install vue@3.2.0 or earlier (later versions include Pinia 3 which is not yet compatible)

   npm create vue@3.2.0

   Make sure to accept typescript and the addition of pinia.

2. Then install the latest version

   npm install @versa-stack/v-craft@alpha

3. Install and configure FormKit

4. Install and configure tailwindcss

5. Make sure you have also all other peerDependencies installed

   npm i locash-es@4.17.21 uui@10.0.0

Setup

Register v-craft and formkit

The following setup is taken from the vitepress documentation's own index.ts file. The marked lines are the relevant calls to register v-craft into your application. Make sure you have also formkit setup properly and added a theme.

import { defaultConfig, plugin } from "@formkit/vue";
import { VCraft } from "@versa-stack/v-craft";
import { createPinia } from "pinia";
import DefaultTheme from "vitepress/theme";
import DemoContainer from "../components/DemoContainer.vue";
import { rootClasses } from "../../formkit.theme";

import "./custom.css";

const pinia = createPinia();

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    app.config.debug = true;
    app.config.devtools = true;
    app.use(pinia);
    app.use(VCraft);
    app.use(
      plugin,
      defaultConfig({
        config: {
          rootClasses,
        },
      })
    );
    app.component("DemoContainer", DemoContainer);
  },
};

Include tailwindcss

Create a custom.css file and add the following first 3 lines to it if you haven't done that already during the tailwindcss setup.

@tailwind base;
@tailwind components;
@tailwind utilities;