Glue Vue is a minimal Vue component library that uses Tailwindcss classes for customisation.

Install the npm package:

npm install @garethfuller/glue
# or with yarn
yarn add @garethfuller/glue

Add it as a plugin in your Vue project, e.g. create a file like glue.js in your plugins folder and add the following to it's contents:

// plugins/glue.js
import Vue from 'vue'
import Glue from '@garethfuller/glue'

Vue.use(Glue)

Import this plugin in your app's build step/file.

Tailwindcss - Glue Vue expects that your project has Tailwind installed. The components then use the Tailwind classes provided by your Tailwind configuration.

For example, using the g-btn component:

<g-btn color="red">Hello World</g-btn>

This will use your Tailwind colour class for bg-red-500 as the background colour for the button, and variant classes for hover/active states.

There are two optional dependencies, Fontawesome and highlight.js, which are used in specific components.

The g-icon component takes a name prop and applies that as a class to an underlying <i :class="'icon ${name}" /> element. The purpose is such that if you have Fontawesome installed in your app you can use the component like this:

<g-icon name="fas fa-user-circle" />

Please see GIcon.vue for more information.

The g-code component makes use of highlight.js (if installed in your app) to syntax highlight any code that is passed into the component. Please see GCode.vue for more information.

yarn install

yarn run dev

yarn run build