Vue PatternFly

PatternFly 6 components for Vue 3.

The components are mostly a straight-forward port of the PatternFly 6 components 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';
import '@patternfly/patternfly/patternfly-addons.css';
// alternatively include them in your html as a <style> tag

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

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

Contributing

Please see CONTRIBUTING and CONDUCT for details.

Documentation

See the storybook for usage instructions and other documentation.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

• Massimiliano Torromeo
• All Contributors

License

The MIT License (MIT). Please see License File for more information.