Installation

Pre-requisites

1. First install Vue 3.5 or later

   npm create vue@latest

   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

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 type { Theme } from "vitepress";
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 CraftContainerExample from "../../components/CraftContainerExample.vue";
import CraftContainerSingleSlot from "../../components/CraftContainerSingleSlot.vue";
import { rootClasses } from "../../../formkit.theme";
import "./style.css";
import "./custom.css";
import "./frame.css";

const pinia = createPinia();

const theme: Theme = {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.use(pinia);
    app.use(VCraft);
    app.use(
      plugin,
      defaultConfig({
        config: {
          rootClasses,
        },
      })
    );
    app.component("DemoContainer", DemoContainer);
    app.component("CraftContainerExample", CraftContainerExample);
    app.component("CraftContainerSingleSlot", CraftContainerSingleSlot);
  },
};

export default theme;

Include tailwindcss

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

@import 'tailwindcss';