PrimeVue is a rich set of open source native components for Vue.
-Watch the video tutorial that goes through the steps documented on this guide.
-This is the recommended way if your application uses Vue CLI, Vite or has a webpack based build with vue-loader configured.
-PrimeVue is available at npm, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project.
@@ -21,10 +17,7 @@ npm install primeicons --save
This is the recommended way if your application uses Vue CLI, Vite or has a webpack based build with vue-loader configured.
- -Begin with installing PrimeVue. This command only sets up the core configuration like locale and does not register any component.
+Next step is setting up PrimeVue configuration.
import {createApp} from 'vue';
import App from './App.vue';
@@ -49,22 +42,16 @@ app.component('Dialog', Dialog);
Finally you'll be able to utilize the component in your application.
+Finally you'll be able to utilize the component in your application. See the Styles section to apply styling.
<Dialog></Dialog>
Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.
-
-<Dialog :showHeader="false"></Dialog>
-
-<!-- can be written as -->
-
-<Dialog :show-header="false"></Dialog>
-
-Watch the video tutorial that goes through these steps.
+SFC files are available in the npm distribution and if you'd like to use SFCs directly, add /sfc as a suffix when referencing an import path. This will instruct your bundler to process the *.vue files @@ -75,7 +62,7 @@ import Dialog from 'primevue/dialog/sfc'; -
Other alternative is utilizing the components directly within the browser with the iife build. Note that PrimeVue does not provide a umd build.
<html>
@@ -113,56 +100,14 @@ import Dialog from 'primevue/dialog/sfc';
}
};
- createApp(App)
- .use(primevue.config.default)
- .mount("#app");
+ createApp(App).use(primevue.config.default).mount("#app");
</script>
</body>
</html>
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.
- -
-dependencies: {
- "vue": "^3.0.0",
- "primeicons": "^4.0.0"
-}
-
-Here is the list of components with 3rd party dependencies. Documentation of each component has a dependencies section as well.
-| Component | -Dependency | -
|---|---|
| Charts | -Charts.js 3.3.2+ | -
| Editor | -Quill.js 1.3.3+ | -
| PrimeFlex | -DataView | -
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.
@@ -214,10 +159,14 @@ primevue/resources/themes/rhea/theme.css -PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly + recommended to add PrimeFlex as it is likely to need such utilities when developing applications. View the PrimeFlex homepage for the more information.
+ +Nuxt 3 is currently in beta and an official module is planned after the final release. At the moment, PrimeVue can easily be used with Nuxt 3 using a custom plugin.
- nuxt.config.js +Open the nuxt configuration file and add the css dependencies.
import { defineNuxtConfig } from 'nuxt3'
@@ -232,7 +181,7 @@ export default defineNuxtConfig({
Create a file like primevue.js under the plugins directory for the configuration.
@@ -248,9 +197,57 @@ export default defineNuxtPlugin((nuxtApp) => {
PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly
- recommended to add PrimeFlex as it is likely to need such utilities when developing applications. View the
PrimeVue components are not wrappers and implemented natively with the Vue APIs. There are some exceptions having 3rd party dependencies such as Quill for Editor.
+In addition, components require PrimeIcons library for icons.
+ +
+dependencies: {
+ "vue": "^3.0.0",
+ "primeicons": "^4.0.0"
+}
+
+Here is the list of components with 3rd party dependencies. Documentation of each component has a dependencies section as well.
+| Component | +Dependency | +
|---|---|
| Charts | +Charts.js 3.3.2+ | +
| Editor | +Quill.js 1.3.3+ | +
| PrimeFlex | +DataView | +
Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.
+
+<Dialog :showHeader="false"></Dialog>
+
+<!-- can be written as -->
+
+<Dialog :show-header="false"></Dialog>
+
+Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at @@ -302,14 +299,6 @@ app.use(PrimeVue, {
PrimeVue provides a Locale API to support i18n and l7n, visit the
An example application based on Vue CLI is available at github.
- -A starter application is also provided for Vite users.
- -Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample typescript-primevue application with Vue CLI is available as at github.
Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample typescript-primevue application with Vue CLI is available as at github.
+ +An example application based on Vue CLI is available at github.
+ +A starter application is also provided for Vite users.
+ +