Installation

Installation

npm install vue-litewind

Vue-litewind uses Tailwindcss as CSS framework. To install Tailwindcss follow instruction in their offical documentation.

Install tailwindcss-forms plugin that provides a basic reset for form styles that makes form elements easy to override with utilities:

npm install -D @tailwindcss/forms

Configuration

Step 1. Configure Tailwind.

Add following to tailwind.config.js :

  • add vue-litewind to content so tailwind can generate utility classes used by components internally,
  • add dark mode class option,
  • extend colors definitions. You can chose any colors for primary, secondary etc
  • add tailwindcss-forms plugin to plugins array
// tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    'node_modules/vue-litewind',
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.js',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: colors.violet,
        secondary: colors.gray,
        info: colors.blue,
        warn: colors.yellow,
        success: colors.green,
        danger: colors.red,
        dark: colors.neutral,
        light: colors.white,
        text: colors.gray,
      }
    },
  },
  plugins: [
    require("@tailwindcss/forms")({
      strategy: 'class',
    }),
  ],
}

Step 2. Import styles files:

style.css contains basic set of classes used by components. Import it directly from library distribution directory

// main.js

import "vue-litewind/vue-litewind.css"

The rest of the styles are set up in js files as tailwind classes. You can import them directly or preferably copy from distribution directory (node_modules) to your application for customization. Imported styles need to be provided to the components with the use of the provide function. The best place to do it is the root component of the application (for example App.vue)

<!-- App.vue -->

<script setup>
  import { provide } from "vue";
  import * as styles from "./styles/components";

  provide("mods", styles);
</script>

Read about customizing styles here.

Step 3. Add vue-litewind plugin:

You can register single or all components in application entry file (for example main.js). Registering single components will make build smaller.

// main.js

import { vueLitewind, components, grid, directives } from "vue-litewind";

let app = createApp(App);

app.use(vueLitewind, {
  components,
  grid,
  directives,
});

// main.js

import { vueLitewind } from "vue-litewind";
import { vButton, vSelect } from "vue-litewind";

let app = createApp(App);

app.use(vueLitewind, {
  components: {
    vButton,
    vSelect,
  }
});

Optional : while registering components you can set default values for the props globally in the second argument of the app.use. If component has name prop that name will be used instead of default name. The value for prop can also be function that takes base argument (base prop of component) and should return default value for the prop. If default props should only apply to selected components you can set defaults for those components by nesting them under their parent components.

Examples of default component props:

// main.js

import { vueLitewind } from "vue-litewind";
import { components} from "vue-litewind";

let app = createApp(App);

app.use(vueLitewind, {
  components,
  componentProps: {
    input: {
      inline: true,
      singleLineMessage: true,
    },
  }
});

// main.js

import { vueLitewind } from "vue-litewind";
import { components} from "vue-litewind";

let app = createApp(App);

app.use(vueLitewind, {
  components,
  componentProps: {
    input: {
      inline: (base) => base === "underlined-input" ? true : false,
      singleLineMessage: true,
    },
  }
});

// main.js

import { vueLitewind } from "vue-litewind";
import { components} from "vue-litewind";

let app = createApp(App);

app.use(vueLitewind, {
  components,
  componentProps: {
    select: {
      inline: true,
      offsetY: 5,
      card: {
        base: "flat-card",
        styleCard: "menu shadow rounded",
      }
    }
  }
});