How to Use PrimeVue with CDN on an html page without npm/node installation

omos · 19 May 2023, 16:28

Hi Everyone,

Please I am trying to use PrimeVue components on an html page without using Vue-Cli/Node/NPM installation. I have followed this video tutorial located at https://www.youtube.com/watch?v=mJt_Y92HGzY&t=2s but it seems not to work currently for me. Below is the code I have so far

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

<script src="https://unpkg.com/vue@3.3.4/dist/vue.gl ... "></script>
<script src="https://unpkg.com/primevue/core/core.js"></script>
<script src="https://unpkg.com/primevue/config/confi ... "></script>
<script src="https://unpkg.com/primevue/utils/utils.min.js"></script>
<script src="https://unpkg.com/primevue@3.29.1/rippl ... "></script>
<script src="https://unpkg.com/primevue@3.29.1/input ... "></script>
<script src="https://unpkg.com/primevue@3.29.1/butto ... "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... "></script>

<body>
<div id="app">
<InputText type="text" v-model="text" />
<Button icon="pi pi-check" @row-select="upper" aria-label="Submit" />
<h1>{{ text }}</h1>
</div>

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

Any help, suggestions or directions would be greatly appreciated. Thanks in advance.

14 Aug 2023, 12:04

Hi,

I want to share an example: https://stackblitz.com/edit/web-platfor ... index.html

If you have any further questions, please feel free to ask.

omos · 14 Aug 2023, 16:10

Thanks for sharing. I think we could still add the following dependency below to remove the [Vue warn]: Failed to resolve component message

<script src="https://unpkg.com/primevue@3.32.0/butto ... "></script>

Thanks and it works well.

How to Use PrimeVue with CDN on an html page without npm/node installation

Who is online