https://github.com/mtorromeo/vue-patternfly

PatternFly 5 components for Vue 3
https://github.com/mtorromeo/vue-patternfly

hacktoberfest patternfly vue vue3

Last synced: about 2 months ago
JSON representation

PatternFly 5 components for Vue 3

• Host: GitHub
• URL: https://github.com/mtorromeo/vue-patternfly
• Owner: mtorromeo
• License: mit
• Created: 2020-07-18T22:53:47.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-07-26T15:11:13.000Z (about 2 months ago)
• Last Synced: 2024-07-27T15:23:21.051Z (about 2 months ago)
• Topics: hacktoberfest, patternfly, vue, vue3
• Language: Vue
• Homepage: https://mtorromeo.github.io/vue-patternfly
• Size: 24.6 MB
• Stars: 20
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue PatternFly

[![LICENSE](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)][link-LICENSE]

[![NPM](https://img.shields.io/npm/v/@vue-patternfly/core.svg?style=flat-square)](https://npmjs.org/package/@vue-patternfly/core)

[![Download](https://img.shields.io/npm/dw/@vue-patternfly/core.svg?style=flat-square)](https://npmjs.org/package/@vue-patternfly/core)

[![Issues](https://img.shields.io/github/issues/mtorromeo/vue-patternfly.svg?style=flat-square)](https://github.com/mtorromeo/vue-patternfly/issues)

PatternFly 5 components for Vue 3.

The components are mostly a straight-forward port of the [PatternFly 5 components][link-patternfly] 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. `` just like `` instead of ``.

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:

```js

import '@patternfly/patternfly/patternfly.css';

import '@patternfly/patternfly/patternfly-addons.css';

// alternatively include them in your html as a  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](CONTRIBUTING.md) and [CONDUCT](CONDUCT.md) for details.

## Documentation

See the [storybook][link-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][link-author]

- [All Contributors][link-contributors]

## License

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

[link-LICENSE]: https://raw.githubusercontent.com/mtorromeo/vue-patternfly/master/packages/core/LICENSE

[link-CONDUCT]: https://github.com/mtorromeo/vue-patternfly/blob/master/packages/core/CONDUCT.md

[link-author]: https://github.com/mtorromeo

[link-contributors]: ../../contributors

[link-patternfly]: https://www.patternfly.org/

[link-storybook]: https://mtorromeo.github.io/vue-patternfly/