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 + +