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/core/core.min.js

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. The plugin is lightweight, only sets up the configuration object without affecting your application.


app.use(primevue.config.default);

Theming #

Include the theme file with a link element, see themes section for the complete list of available themes to choose from.


<link rel="stylesheet" href="https://unpkg.com/primevue/resources/themes/lara-light-green/theme.css" />

Component #

Include the component to use with a script tag.


<script src="https://unpkg.com/primevue/calendar/calendar.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" />
    <link rel="stylesheet" href="https://unpkg.com/primevue/resources/themes/lara-light-green/theme.css" />
  </head>
  <body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/primevue/core/core.min.js"></script>
    <script src="https://unpkg.com/primevue/calendar/calendar.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.default);
      app.component('p-datepicker', primevue.calendar);

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