vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update README.md

pull/4556/head
Tuğçe Küçükoğlu 2023-09-26 16:43:11 +03:00
parent 0b2b2ed0cf
commit 2b480e1503
1 changed files with 17 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
README.md
View File

@ -1,4 +1,3 @@
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![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) [![npm version](https://badge.fury.io/js/primevue.svg)](https://badge.fury.io/js/primevue)
[![Discord Chat](https://img.shields.io/discord/557940238991753223.svg?color=7289da&label=chat&logo=discord)](https://discord.gg/gzKFYnpmCY) [![Discord Chat](https://img.shields.io/discord/557940238991753223.svg?color=7289da&label=chat&logo=discord)](https://discord.gg/gzKFYnpmCY)
@ -14,13 +13,13 @@ PrimeVue is a rich set of open source UI Components for Vue. See [PrimeVue homep
PrimeVue is available at [npm](https://www.npmjs.com/package/primevue). PrimeVue is available at [npm](https://www.npmjs.com/package/primevue).
```` ```
// with npm // with npm
npm install primevue npm install primevue
// with yarn // with yarn
yarn add primevue yarn add primevue
```` ```
## Plugin ## Plugin
@ -35,6 +34,7 @@ app.use(PrimeVue);
``` ```
## Theming ## Theming
PrimeVue has two theming has modes; styled or unstyled. PrimeVue has two theming has modes; styled or unstyled.
**Styled Mode** **Styled Mode**
@ -46,21 +46,13 @@ Styled mode is based on pre-skinned components with opinionated themes like Mate
import 'primevue/resources/themes/lara-light-blue/theme.css'; import 'primevue/resources/themes/lara-light-blue/theme.css';
``` ```
Each PrimeVue theme has its own font family so it is suggested to apply it to your application for a unified look.
```
body {
font-family: var(--font-family);
}
```
**Unstyled Mode** **Unstyled Mode**
Unstyled mode is disabled by default for all components. Using the PrimeVue plugin during installation, set `unstyled` as true to enable it globally. Visit the [Unstyled mode](https://primevue.org/unstyled) documentation for more information and examples. Unstyled mode is disabled by default for all components. Using the PrimeVue plugin during installation, set `unstyled` as true to enable it globally. Visit the [Unstyled mode](https://primevue.org/unstyled) documentation for more information and examples.
```javascript ```javascript
import { createApp } from "vue"; import { createApp } from 'vue';
import PrimeVue from "primevue/config"; import PrimeVue from 'primevue/config';
const app = createApp(App); const app = createApp(App);
app.use(PrimeVue, { unstyled: true }); app.use(PrimeVue, { unstyled: true });
@ -71,13 +63,12 @@ app.use(PrimeVue, { unstyled: true });
Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component. Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.
```javascript ```javascript
import Button from "primevue/button" import Button from 'primevue/button';
const app = createApp(App); const app = createApp(App);
app.component('Button', Button); app.component('Button', Button);
``` ```
## Prop Cases ## Prop Cases
Component prop names are described as camel case throughout the documentation however kebap-case is also fully supported. Events on the other hand should always be kebap-case. Component prop names are described as camel case throughout the documentation however kebap-case is also fully supported. Events on the other hand should always be kebap-case.
@ -90,7 +81,6 @@ Component prop names are described as camel case throughout the documentation ho
<Dialog :show-header="false"></Dialog> <Dialog :show-header="false"></Dialog>
``` ```
## Nuxt Integration ## Nuxt Integration
PrimeVue can easily be used with Nuxt 3 using a custom plugin. PrimeVue can easily be used with Nuxt 3 using a custom plugin.
@ -101,13 +91,11 @@ Open the nuxt configuration file and add the css dependencies.
```javascript ```javascript
export default defineNuxtConfig({ export default defineNuxtConfig({
css: [ css: ['primevue/resources/themes/lara-light-blue/theme.css'],
"primevue/resources/themes/lara-light-blue/theme.css"
],
build: { build: {
transpile: ["primevue"] transpile: ['primevue']
} }
}) });
``` ```
**primevue.js** **primevue.js**
@ -115,9 +103,9 @@ export default defineNuxtConfig({
Create a file like **primevue.js** under the plugins directory for the configuration. Create a file like **primevue.js** under the plugins directory for the configuration.
```javascript ```javascript
import { defineNuxtPlugin } from "#app"; import { defineNuxtPlugin } from '#app';
import PrimeVue from "primevue/config"; import PrimeVue from 'primevue/config';
import Button from "primevue/button"; import Button from 'primevue/button';
export default defineNuxtPlugin((nuxtApp) => { export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(PrimeVue, { ripple: true }); nuxtApp.vueApp.use(PrimeVue, { ripple: true });
@ -131,21 +119,19 @@ export default defineNuxtPlugin((nuxtApp) => {
We've created various samples for the popular options in the Vue ecosystem. Visit the [primevue-examples](https://github.com/primefaces/primevue-examples) repository for the samples. We've created various samples for the popular options in the Vue ecosystem. Visit the [primevue-examples](https://github.com/primefaces/primevue-examples) repository for the samples.
### Vite ### Vite
<a href="https://github.com/primefaces/primevue-examples/tree/main/vite-quickstart"> <a href="https://github.com/primefaces/primevue-examples/tree/main/vite-quickstart">
<img src="https://primefaces.org/cdn/primevue/images/logos/vite.svg" alt="vite" width="112" height="112"> <img src="https://primefaces.org/cdn/primevue/images/logos/vite.svg" alt="vite" width="112" height="112">
</a> </a>
### Nuxt ### Nuxt
<a href="https://github.com/primefaces/primevue-examples/tree/main/nuxt3-quickstart"> <a href="https://github.com/primefaces/primevue-examples/tree/main/nuxt3-quickstart">
<img src="https://primefaces.org/cdn/primevue/images/logos/nuxt.svg" alt="nuxt" width="112" height="112"> <img src="https://primefaces.org/cdn/primevue/images/logos/nuxt.svg" alt="nuxt" width="112" height="112">
</a> </a>
### Vue-CLI
<a href="https://github.com/primefaces/primevue-quickstart">
<img src="https://primefaces.org/cdn/primevue/images/logos/vue.svg" alt="vue-cli" width="112" height="112">
</a>
### Astro ### Astro
<a href="https://github.com/primefaces/primevue-examples/tree/main/astro-quickstart"> <a href="https://github.com/primefaces/primevue-examples/tree/main/astro-quickstart">
<img src="https://primefaces.org/cdn/primevue/images/logos/astro.svg" alt="astro" width="112" height="112"> <img src="https://primefaces.org/cdn/primevue/images/logos/astro.svg" alt="astro" width="112" height="112">
</a> </a>