diff --git a/README.md b/README.md index fcccaa628..7a382a90b 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,88 @@ -# primevue -## Project setup -``` -npm install +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) +[![npm version](https://badge.fury.io/js/primevue.svg)](https://badge.fury.io/js/primevue) +[![Join the chat at https://gitter.im/primefaces/primevue](https://badges.gitter.im/primefaces/primevue.svg)](https://gitter.im/primefaces/primevue?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) + + +# PrimeVue + +![alt text](https://www.primefaces.org/wp-content/uploads/2019/05/primevue-logo.png "PrimeVue") + + +PrimeVue is available at npm, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project. + +```js +npm install primevue --save +npm install primeicons --save ``` -### Compiles and hot-reloads for development +### Module Loader +This is the recommended way if your application uses [vue-cli](https://cli.vuejs.org/) or has a webpack based build with [vue-loader](https://github.com/vuejs/vue-loader) configured. Import the components as .vue files for seamless integration within your project where path of each component is available at the "import" section of a component documentation. + +```js +//import {ComponentName} from 'primevue/{componentname}'; + +import {Dialog} from 'primevue/dialog'; ``` -npm run serve +In the next step, register the component with the tag name you'd like to use. +```js +Vue.component('Dialog', Dialog); +``` +Then you'll be able to utilize the component in your application. +```markup + ``` -### Compiles and minifies for production -``` -npm run build +### Script Tag +Other alternative is utilizing the components directly within the browser with UMD packages. +```markup + +calendar demo + + + +
+ +
+ + ``` -### Run your tests -``` -npm run test +### Dependencies +Majority of PrimeVue components (95%) are native and there are some exceptions having 3rd party dependencies such as Quill for Editor. + +In addition, components require PrimeIcons library for icons. +```js +dependencies: { + "vue": "^2.6.10", + "primeicons": "^1.0.0" +} ``` -### Lints and fixes files -``` -npm run lint +Here is the list of components with 3rd party dependencies. + +Component | Dependency +--- | --- +Charts | Charts.js 2.1.x+ +Editor | Quill.js 1.3.3+ +FullCalendar | FullCalendar 4.0.2+ +PrimeFlex | DataView + + +### Styles +The css dependencies are as follows, note that you may change the theme with another one of your choice. If you are using a bundler such as webpack with a css loader you may import them to your main application component. + +```javascript +primevue/resources/themes/nova-light/theme.css //theme +primevue/resources/primevue.min.css //shared css +primeicons/primeicons.css //icons ``` -### Run your unit tests -``` -npm run test:unit -``` - -### Customize configuration -See [Configuration Reference](https://cli.vuejs.org/config/). +### Quickstart +An example application based on vue-cli is available at [github](https://github.com/primefaces/primevue-quickstart).