2019-05-21 12:06:16 +00:00
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="content-section introduction">
|
|
|
|
|
<div class="feature-intro">
|
|
|
|
|
<h1>Setup</h1>
|
|
|
|
|
<p>PrimeVue is a rich set of open source native components for Vue.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="content-section documentation">
|
|
|
|
|
<h3 style="margin:0">Download</h3>
|
|
|
|
|
<p>PrimeVue is available at npm, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project.</p>
|
|
|
|
|
|
|
|
|
|
<CodeHighlight lang="js">
|
|
|
|
|
npm install primevue --save
|
|
|
|
|
npm install primeicons --save
|
|
|
|
|
</CodeHighlight>
|
|
|
|
|
|
|
|
|
|
<h3>Import</h3>
|
|
|
|
|
<p>Path of each component is available at the "import" section of a component documentation.</p>
|
|
|
|
|
|
|
|
|
|
<CodeHighlight lang="js">
|
|
|
|
|
//import {ComponentName} from 'primevue/{componentname}';
|
2019-05-24 11:10:45 +00:00
|
|
|
|
2019-05-21 12:06:16 +00:00
|
|
|
import {Dialog} from 'primevue/dialog';
|
2019-05-24 11:10:45 +00:00
|
|
|
</CodeHighlight>
|
2019-05-21 12:06:16 +00:00
|
|
|
|
2019-05-24 11:10:45 +00:00
|
|
|
<h3>Register</h3>
|
|
|
|
|
<p>In the next step, register the component with the tag name you'd like to use.</p>
|
|
|
|
|
<CodeHighlight lang="js">
|
|
|
|
|
Vue.component('Dialog', Dialog);
|
2019-05-21 12:06:16 +00:00
|
|
|
</CodeHighlight>
|
2019-05-24 11:10:45 +00:00
|
|
|
|
2019-05-21 12:06:16 +00:00
|
|
|
|
|
|
|
|
<h3>Dependencies</h3>
|
|
|
|
|
<p>Majority of PrimeVue components (95%) are native and there are some exceptions having 3rd party dependencies such as Google Maps for GMap.</p>
|
|
|
|
|
<p>In addition, components require PrimeIcons library for icons.</p>
|
|
|
|
|
|
|
|
|
|
<CodeHighlight lang="js">
|
|
|
|
|
dependencies: {
|
|
|
|
|
"vue": "^2.6.10",
|
|
|
|
|
"primeicons": "^1.0.0"
|
|
|
|
|
}
|
|
|
|
|
</CodeHighlight>
|
|
|
|
|
|
|
|
|
|
<p>Here is the list of components with 3rd party dependencies.</p>
|
|
|
|
|
<div class="doc-tablewrapper">
|
|
|
|
|
<table class="doc-table">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Component</th>
|
|
|
|
|
<th>Dependency</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Charts</td>
|
|
|
|
|
<td>Charts.js 2.1.x+</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Editor</td>
|
|
|
|
|
<td>Quill.js 1.3.3+</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>FullCalendar</td>
|
|
|
|
|
<td>FullCalendar 4.0.2+.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>PrimeFlex</td>
|
|
|
|
|
<td>DataView and MegaMenu components.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h3>Styles</h3>
|
|
|
|
|
<p>The css dependencies are as follows, note that you may change the theme with another one of your choice. If you are using a bundler such as webpack with a css loader you
|
|
|
|
|
may import them to your main application component.</p>
|
|
|
|
|
|
|
|
|
|
<CodeHighlight class="language-javascript">
|
|
|
|
|
primevue/resources/themes/nova-light/theme.css
|
|
|
|
|
primevue/resources/primevue.min.css
|
|
|
|
|
primeicons/primeicons.css
|
|
|
|
|
</CodeHighlight>
|
|
|
|
|
|
|
|
|
|
<h3>Quickstart</h3>
|
|
|
|
|
<p>An example application based on vue-cli is available at <a href="https://github.com/primefaces/primevue-quickstart">github</a>.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
