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.
How to Use PrimeVue with CDN on an html page without npm/node installation
-
- Posts: 560
- Joined: 23 Oct 2020, 09:28
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.
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.
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.
<script src="https://unpkg.com/primevue@3.32.0/butto ... "></script>
Thanks and it works well.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest