Install PrimeVue with Vite

Setting up PrimeVue in a Vite project.

Script #

You can use PrimeVue and Vue.js from a CDN with a script tag. This approach does not involve any build step, and is suitable for enhancing static HTML. This guide uses unpkg however other providers such as jsdeliver and cdnjs can also be used.


https://unpkg.com/vue@3/dist/vue.global.js
https://unpkg.com/primevue/umd/primevue.min.js
https://unpkg.com/@primevue/themes/umd/aura.min.js  // see theming for alternatives

CreateApp #

Create an app container element and setup the application using createApp.


<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
    </div>

    <script>
        const { createApp, ref } = Vue;

        const app = createApp({
            setup() {

            }
        });

        app.mount('#app');
    </script>
</body>

Plugin #

PrimeVue plugin is required to be installed as an application plugin to set up the default configuration.


app.use(PrimeVue.Config);

Theming #

Include the theme preset via a script element after adding PrimeVue, valid options are Aura, Lara and Nora.


<!-- <script src="https://unpkg.com/@primevue/themes/umd/{preset}.min.js"></script> -->

<script src="https://unpkg.com/@primevue/themes/umd/aura.min.js"></script>
<script src="https://unpkg.com/@primevue/themes/umd/lara.min.js"></script>
<script src="https://unpkg.com/@primevue/themes/umd/nora.min.js"></script>

Example #

A complete example using a PrimeVue DatePicker. You can also view this sample live at Stackblitz.


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>PrimeVue + CDN</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>
    <script src="https://unpkg.com/@primevue/themes/umd/aura.min.js"></script>

    <div id="app">
      <p-datepicker v-model="date"></p-datepicker>
      <br /><br />
      {{ date }}
    </div>

    <script>
      const { createApp, ref } = Vue;

      const app = createApp({
        setup() {
          const date = ref();

          return {
            date
          };
        },
      });

      app.use(PrimeVue.Config, {
        theme: {
            preset: PrimeVue.Themes.Aura
        }
      });

      app.component('p-datepicker', PrimeVue.DatePicker);

      app.mount('#app');
    </script>
  </body>
</html>