PrimeVue CDN use?

Peetyo · 16 May 2023, 09:45

Hello,

Could anyone direct me to a guide on how to use CDN for PrimeVue? We are working on a PHP project where we have integrated some simple Vue components only using the Vue CDN and are also trying to add PrimeVue as well.

I found a guide on YouTube but it seems to be outdated based on the endpoints he accesses:

https://www.youtube.com/watch?v=mJt_Y92 ... atayCivici

P.S. we are using the Options API.

Thank you for your help!

wadjakman · 18 May 2023, 23:06

Hi,

I am in the same situation, there is no updated documentation about it.

I've added the CDNs:

Code: Select all

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>RoPloX main page</title>
        <link rel="stylesheet" href="https://unpkg.com/primevue/resources/themes/rhea/theme.css" />
        <link rel="stylesheet" href="https://unpkg.com/primevue/resources/primevue.css" />
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>
        <script src="https://unpkg.com/primevue/core/core.js"></script>
        <script src="https://unpkg.com/primevue/menubar/menubar.js"></script>
        <script src="main.mjs" type="module"></script>
    </head>

    <body id="appRoot">
        <vue-app-root/>
    </body>

... and in the root component I've configured the menubar component:

Code: Select all


export default {
    template: `
        <menubar></menubar>
    `,

    components: { "menubar": primevue.menubar },

But it fails because $primevue is not defined. Probably the PrimeVue.install method is not called and this special variable is not propagated:

Uncaught (in promise) TypeError: this.$primevue is undefined
- defaultPT https://unpkg.com/primevue/core/core.js:1955
- VueJS 4
- getPTValue https://unpkg.com/primevue/core/core.js:1936
- ptm https://unpkg.com/primevue/core/core.js:1947
- render https://unpkg.com/primevue/menubar/menubar.js:872
- VueJS 28

Anyone who can help with this?

Thanks

omos · 22 May 2023, 12:23

This is what worked for me when using PrimeVue CDN on an html page

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://unpkg.com/primevue@^3/resources ... /theme.css" rel="stylesheet" />
<link href="https://unpkg.com/primevue@^3/resources ... ue.min.css" rel="stylesheet" />
<link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
</head>

<body>

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/primevue@^3/core/core ... "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... "></script>

<script src="https://unpkg.com/primevue@^3/inputtext ... "></script>
<script src="https://unpkg.com/primevue@^3/button/bu ... "></script>

<div id="app">
<p-button icon="pi pi-check" @click="upper"></p-button>
<p-inputtext v-model="text" type="text"></p-inputtext>

<h1>{{ text }}</h1>
</div>

<script type="module">
const {createApp, ref} = Vue;
const App = {
data() {
const text = ref(null);
const upper = () => text.value = text.value.toUpperCase();
return {
text,
upper
};
},
components: {
"p-inputtext": primevue.inputtext,
"p-button": primevue.button
}
};
const app = createApp(App);
app.use(primevue.config.default);
app.mount('#app');
</script>
</body>
</html>

Peetyo · 24 May 2023, 15:27

wadjakman wrote: ↑
18 May 2023, 23:06
Hi,

I am in the same situation, there is no updated documentation about it.

I've added the CDNs:
Code: Select all
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>RoPloX main page</title>
        <link rel="stylesheet" href="https://unpkg.com/primevue/resources/themes/rhea/theme.css" />
        <link rel="stylesheet" href="https://unpkg.com/primevue/resources/primevue.css" />
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>
        <script src="https://unpkg.com/primevue/core/core.js"></script>
        <script src="https://unpkg.com/primevue/menubar/menubar.js"></script>
        <script src="main.mjs" type="module"></script>
    </head>

    <body id="appRoot">
        <vue-app-root/>
    </body>
... and in the root component I've configured the menubar component:
Code: Select all
export default {
    template: `
        <menubar></menubar>
    `,

    components: { "menubar": primevue.menubar },
But it fails because $primevue is not defined. Probably the PrimeVue.install method is not called and this special variable is not propagated:

Uncaught (in promise) TypeError: this.$primevue is undefined
- defaultPT https://unpkg.com/primevue/core/core.js:1955
- VueJS 4
- getPTValue https://unpkg.com/primevue/core/core.js:1936
- ptm https://unpkg.com/primevue/core/core.js:1947
- render https://unpkg.com/primevue/menubar/menubar.js:872
- VueJS 28
Anyone who can help with this?

Thanks

Hey,
I managed to find a solution. It's pretty much what omos sent in. I, however, used the options API in my app so it goes sth like the below code. I think you have missed to add the app.use and app.component part and that's why you get an error.

const app = Vue.createApp(CreateUserForm);

// Import tree component from Primevue into this app
app.use(primevue.config.default);
app.component('NestedCheckbox', primevue.tree);

app.mount('#createUserForm');

the Primevue code that's essential in my experiecne is the CSS, the Theme and Core.js. I didn't use CDN but I downloaded the code from unpackaged CDN so the head of my document includes these:

<link rel="stylesheet" type="text/css" media="all" href="/lib/primevue/css/primevue.min.css?">
// I think it's necessary to use a theme apart from the primevue css - I needed Bootstrap 4
<link rel="stylesheet" type="text/css" media="all" href="/lib/primevue/themes/bootstrap4-light-blue.css">

// all the JS that I needed for the "tree" component is here apparently
<script type="text/javascript" src="/lib/primevue/js/core.min.js"></script>

PrimeVue CDN use?

Who is online