I'm using PrimeVue with the CDN option. In the tutorial, it says "Include the component to use with a script tag". But some components work without importing, just registering them as components is enough, such as buttons, messages, input texts, etc, but with others, such as DataTable, only works importing first. Also, it would be helpful if there were a list of all the components in tutorial for CDN option to import, it only shows how to import the Calendar.
The HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PrimeVue Demo</title>
<link rel="stylesheet" href="https://unpkg.com/primevue/resources/themes/lara-light-blue/theme.css" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/primevue/core/core.min.js"></script>
</head>
<body>
<div id="app">
<p-datatable :value="items">
<p-column field="id" header="Id"></p-column>
<p-column field="name" header="Name"></p-column>
</p-datatable>
<p-button label="Submit"></p-button>
<p-inputtext type="text" />
<p-message>Message</p-message>
</div>
<script src="app.js"></script>
</body>
</html>
The app.js script:
const { createApp, ref } = Vue
const App = {
setup() {
const items = ref([{ id: 1, name: 'Item 1'}])
return { items }
},
components: {
"p-button": primevue.button,
"p-inputtext": primevue.inputtext,
"p-message": primevue.message,
"p-column": primevue.column,
"p-datatable": primevue.datatable
}
}
createApp(App).use(primevue.config.default).mount("#app")
The others components work, but the DataTable gives the warning message on console:
[Vue warn]: Component is missing template or render function.
at <PDatatable value= ...
So, when the DataTable components are imported, the problem is fixed:
<script src="https://unpkg.com/primevue/datatable/datatable.min.js"></script>
<script src="https://unpkg.com/primevue/column/column.min.js"></script>
Although the other components didn't need to be imported.
If you use CDN, you have to load components individually (see docs), so for datatable and column, you need to add:
<script src="https://unpkg.com/primevue/datatable/datatable.min.js"></script>
<script src="https://unpkg.com/primevue/column/column.min.js"></script>
Here it is in a snippet:
const { createApp, ref } = Vue
const App = {
setup() {
const products = ref([])
return {
products
}
},
components: {
"p-column": primevue.column,
"p-datatable": primevue.datatable
}
}
const app = createApp(App)
.use(primevue.config.default)
.mount("#app")
<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/datatable/datatable.min.js"></script>
<script src="https://unpkg.com/primevue/column/column.min.js"></script>
<div id="app">
<p-datatable :value="products">
<p-column field="code" header="Code"></p-column>
<p-column field="name" header="Name"></p-column>
<p-column field="category" header="Category"></p-column>
<p-column field="quantity" header="Quantity"></p-column>
</p-datatable>
</div>
<script src="app.js"></script>There are a few components that seem to be included in core, so you don't have to import them individually: