Install Wedges

  pnpm i wedges-vue

Configure Tailwind CSS

Wedges requires Tailwind CSS to be installed prior to use. If you haven't installed it already, follow the instructions in the official Tailwind CSS installation guide.

Once Tailwind CSS is installed, update your tailwind.config file to add the necessary configuration for Wedges:

import type { Config } from "tailwindcss";
import { wedgesTW } from "wedges-vue";

const config: Config = {
  content: [
    // ...
    "node_modules/wedges-vue/dist/**/*.{js,ts,vue}",
  ],
  theme: {},
  darkMode: "class",
  plugins: [wedgesTW()],
};

export default config;

Setup pnpm (optional)

If you're using pnpm, add the following line to your .npmrc file:

public-hoist-pattern[]=*@lmsqueezy/*

This ensures that pnpm correctly handles dependencies for Wedges, allowing necessary packages to be accessible at the top level of your node_modules.

After updating, run pnpm install again to reconfigure your dependencies correctly.

Using the components

That's all. You can now start using the components in your application.

<script setup lang="ts">
import { Alert } from "wedges-vue";
</script>

<template>
  <Alert>You're awesome!</Alert>
</template>