PatternFly 4 ui components for Vue 3

by Vue.js Examples

Vue PatternFly

PatternFly 4 components for Vue 3.

View Demo View Github

The components are mostly a straight-forward port of the [PatternFly 4 components][link-patternfly4] to Vue 3 with some differences where it makes sense to improve ergonomics or add new features.

Common differences from patternfly-react

Component names are prefixed with pf-

This is done to conform to the custom element specification that requires component names to include an hyphen and to avoid conflicts with other components.

Boolean props "is/has" prefixes removed

This makes it easier to use the components and matches the naming convention of native elements. E.g. <pf-text-input disabled /> just like <input disabled> instead of <pf-text-input is-disabled />.

By doing this we can also omit to declare some props that are automatically inherited by the underlying native element.

Get started

Install the library with the package management tool of your choice:

npm install --save @vue-patternfly/core
# or
yarn add @vue-patternfly/core

Then you can import the components you need or use the whole library of components like this:

import '@patternfly/patternfly/patternfly.css';
// alternatively include it in your html as a <style> tag

import { createApp } from 'vue';
import VuePatternfly4 from '@vue-patternfly/core';

const app = createApp({
  setup() {
    return {};
  },
});
app.use(VuePatternfly4);
app.mount('#app');