-npm install primevue@^3.1.1 --save
+npm install primevue@^3.2.0-rc.1 --save
npm install primeicons --save
This is the recommended way if your application uses vue-cli or has a webpack based build with vue-loader configured.
+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.
@@ -55,31 +55,60 @@ app.component('Dialog', Dialog);
<Dialog></Dialog>
-
+
+
+ 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 + in your local build instead of using the compiled output. One use case for this approach is optimizing for SSR by removing whitespaces.
+ +
+
+import Dialog from 'primevue/dialog/sfc';
+
+
Other alternative is utilizing the components directly within the browser with UMD packages.
+Other alternative is utilizing the components directly within the browser with the iife build. Note that PrimeVue does not provide a umd build.
-<meta charset="utf-8">
-<title>calendar demo</title>
-<link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
-<link href="https://unpkg.com/primevue/resources/primevue.min.css " rel="stylesheet">
-<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
-<script src="https://unpkg.com/vue@next"></script>
-<script src="https://unpkg.com/primevue/calendar/calendar.umd.min.js"></script>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>PrimeVue Demo</title>
+ <link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.cs " rel="stylesheet">
+ <link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
+ <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
-<div id="app">
- <p-calendar></p-calendar>
-</div>
+ <script src="https://unpkg.com/vue@next"></script>
+ <script src="https://unpkg.com/primevue/inputtext"></script>
+ </head>
-<script>
-Vue.createApp({
- components: {
- 'p-calendar': calendar
- }
-}).mount('#app')
-</script>
+ <body>
+ <div id="app">
+ <p-inputtext v-model="val"></p-inputtext>
+ <h6>{{val}}</h6>
+ </div>
+
+ <script>
+ const {createApp, ref} = Vue;
+
+ const App = {
+ setup() {
+ const val = ref(null);
+
+ return {
+ val
+ };
+ },
+ components: {
+ 'p-inputtext': primevue.inputtext
+ }
+ };
+
+ createApp(App).mount("#app");
+ </script>
+ </body>
+</html>
@@ -98,7 +127,7 @@ dependencies: {
Here is the list of components with 3rd party dependencies.
+Here is the list of components with 3rd party dependencies. Documentation of each component has a dependencies section as well.