Doc update
Cagatay Civici
parent
6dfdd7ae43
commit
d5344092f8
|
|
@ -6,13 +6,9 @@
|
||||||
<h1>Setup</h1>
|
<h1>Setup</h1>
|
||||||
<p>PrimeVue is a rich set of open source native components for Vue.</p>
|
<p>PrimeVue is a rich set of open source native components for Vue.</p>
|
||||||
|
|
||||||
<h5>Video Tutorial</h5>
|
<h3>Module Loader</h3>
|
||||||
<p>Watch the video tutorial that goes through the steps documented on this guide.</p>
|
<p>This is the recommended way if your application uses <a href="https://cli.vuejs.org">Vue CLI</a>, <a href="https://vitejs.dev">Vite</a> or has a webpack based build with <a href="https://github.com/vuejs/vue-loader">vue-loader</a> configured.</p>
|
||||||
<div class="video-container">
|
|
||||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/cGTXuyqIwMA" frameborder="0" allowfullscreen></iframe>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Download</h5>
|
|
||||||
<p>PrimeVue is available at <a href="https://www.npmjs.com/package/primevue">npm</a>, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project.</p>
|
<p>PrimeVue is available at <a href="https://www.npmjs.com/package/primevue">npm</a>, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project.</p>
|
||||||
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
|
|
@ -21,10 +17,7 @@ npm install primeicons --save
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Module Loader</h5>
|
<p>Next step is setting up PrimeVue configuration.</p>
|
||||||
<p>This is the recommended way if your application uses <a href="https://cli.vuejs.org">Vue CLI</a>, <a href="https://vitejs.dev">Vite</a> or has a webpack based build with <a href="https://github.com/vuejs/vue-loader">vue-loader</a> configured.</p>
|
|
||||||
|
|
||||||
<p>Begin with installing PrimeVue. This command only sets up the core configuration like locale and does not register any component.</p>
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import {createApp} from 'vue';
|
import {createApp} from 'vue';
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
|
|
@ -49,22 +42,16 @@ app.component('Dialog', Dialog);
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<p>Finally you'll be able to utilize the component in your application.</p>
|
<p>Finally you'll be able to utilize the component in your application. See the <b>Styles</b> section to apply styling.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Dialog></Dialog>
|
<Dialog></Dialog>
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Prop Cases</h5>
|
<p>Watch the video tutorial that goes through these steps.</p>
|
||||||
<p>Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.</p>
|
<div class="video-container">
|
||||||
<pre v-code><code>
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/cGTXuyqIwMA" frameborder="0" allowfullscreen></iframe>
|
||||||
<Dialog :showHeader="false"></Dialog>
|
</div>
|
||||||
|
|
||||||
<!-- can be written as -->
|
|
||||||
|
|
||||||
<Dialog :show-header="false"></Dialog>
|
|
||||||
|
|
||||||
</code></pre>
|
|
||||||
|
|
||||||
<h5>Single File Components</h5>
|
<h5>Single File Components</h5>
|
||||||
<p>SFC files are available in the npm distribution and if you'd like to use SFCs directly, add <i>/sfc</i> as a suffix when referencing an import path. This will instruct your bundler to process the *.vue files
|
<p>SFC files are available in the npm distribution and if you'd like to use SFCs directly, add <i>/sfc</i> as a suffix when referencing an import path. This will instruct your bundler to process the *.vue files
|
||||||
|
|
@ -75,7 +62,7 @@ import Dialog from 'primevue/dialog/sfc';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Script Tag</h5>
|
<h3>Script Tag</h3>
|
||||||
<p>Other alternative is utilizing the components directly within the browser with the <i>iife</i> build. Note that PrimeVue does not provide a <i>umd</i> build.</p>
|
<p>Other alternative is utilizing the components directly within the browser with the <i>iife</i> build. Note that PrimeVue does not provide a <i>umd</i> build.</p>
|
||||||
<pre v-code><code><template v-pre>
|
<pre v-code><code><template v-pre>
|
||||||
<html>
|
<html>
|
||||||
|
|
@ -113,56 +100,14 @@ import Dialog from 'primevue/dialog/sfc';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
createApp(App)
|
createApp(App).use(primevue.config.default).mount("#app");
|
||||||
.use(primevue.config.default)
|
|
||||||
.mount("#app");
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
</template>
|
</template>
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h3>Styles</h3>
|
||||||
<p>Majority of PrimeVue components (95%) are native and there are some exceptions having 3rd party dependencies such as Quill for Editor.</p>
|
|
||||||
<p>In addition, components require PrimeIcons library for icons.</p>
|
|
||||||
|
|
||||||
<h6>Mandatory</h6>
|
|
||||||
<pre v-code.script><code>
|
|
||||||
dependencies: {
|
|
||||||
"vue": "^3.0.0",
|
|
||||||
"primeicons": "^4.0.0"
|
|
||||||
}
|
|
||||||
|
|
||||||
</code></pre>
|
|
||||||
|
|
||||||
<h6>Optional</h6>
|
|
||||||
<p>Here is the list of components with 3rd party dependencies. Documentation of each component has a dependencies section as well.</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 3.3.2+</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Editor</td>
|
|
||||||
<td>Quill.js 1.3.3+</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>PrimeFlex</td>
|
|
||||||
<td>DataView</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Styles</h5>
|
|
||||||
<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
|
<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>
|
may import them to your main application component.</p>
|
||||||
|
|
||||||
|
|
@ -214,10 +159,14 @@ primevue/resources/themes/rhea/theme.css
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Nuxt Integration</h5>
|
<h5>PrimeFlex</h5>
|
||||||
|
<p>PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly
|
||||||
|
recommended to add PrimeFlex as it is likely to need such utilities when developing applications. View the <a href="https://www.primefaces.org/primeflex">PrimeFlex</a> homepage for the more information.</p>
|
||||||
|
|
||||||
|
<h3>Nuxt Integration</h3>
|
||||||
<p>Nuxt 3 is currently in beta and an official module is planned after the final release. At the moment, PrimeVue can easily be used with Nuxt 3 using a custom plugin.</p>
|
<p>Nuxt 3 is currently in beta and an official module is planned after the final release. At the moment, PrimeVue can easily be used with Nuxt 3 using a custom plugin.</p>
|
||||||
|
|
||||||
<b>nuxt.config.js</b>
|
<h6>nuxt.config.js</h6>
|
||||||
<p>Open the nuxt configuration file and add the css dependencies.</p>
|
<p>Open the nuxt configuration file and add the css dependencies.</p>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import { defineNuxtConfig } from 'nuxt3'
|
import { defineNuxtConfig } from 'nuxt3'
|
||||||
|
|
@ -232,7 +181,7 @@ export default defineNuxtConfig({
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<b>primevue.js</b>
|
<h6>primevue.js</h6>
|
||||||
<p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
|
<p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
|
||||||
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
|
|
@ -248,9 +197,57 @@ export default defineNuxtPlugin((nuxtApp) => {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>PrimeFlex</h5>
|
<h3>Configuration</h3>
|
||||||
<p>PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly
|
<h5>Dependencies</h5>
|
||||||
recommended to add PrimeFlex as it is likely to need such utilities when developing applications. View the <router-link to="/primeflex">PrimeFlex</router-link> section for the installation.</p>
|
<p>PrimeVue components are not wrappers and implemented natively with the Vue APIs. There are some exceptions having 3rd party dependencies such as Quill for Editor.</p>
|
||||||
|
<p>In addition, components require PrimeIcons library for icons.</p>
|
||||||
|
|
||||||
|
<h6>Mandatory</h6>
|
||||||
|
<pre v-code.script><code>
|
||||||
|
dependencies: {
|
||||||
|
"vue": "^3.0.0",
|
||||||
|
"primeicons": "^4.0.0"
|
||||||
|
}
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h6>Optional</h6>
|
||||||
|
<p>Here is the list of components with 3rd party dependencies. Documentation of each component has a dependencies section as well.</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 3.3.2+</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Editor</td>
|
||||||
|
<td>Quill.js 1.3.3+</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>PrimeFlex</td>
|
||||||
|
<td>DataView</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Prop Cases</h5>
|
||||||
|
<p>Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.</p>
|
||||||
|
<pre v-code><code>
|
||||||
|
<Dialog :showHeader="false"></Dialog>
|
||||||
|
|
||||||
|
<!-- can be written as -->
|
||||||
|
|
||||||
|
<Dialog :show-header="false"></Dialog>
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
<h5>Ripple</h5>
|
<h5>Ripple</h5>
|
||||||
<p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
|
<p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
|
||||||
|
|
@ -302,14 +299,6 @@ app.use(PrimeVue, {
|
||||||
<h5>Locale</h5>
|
<h5>Locale</h5>
|
||||||
<p>PrimeVue provides a Locale API to support i18n and l7n, visit the <router-link to="/locale">Locale</router-link> documentation for more information.</p>
|
<p>PrimeVue provides a Locale API to support i18n and l7n, visit the <router-link to="/locale">Locale</router-link> documentation for more information.</p>
|
||||||
|
|
||||||
<h5>Quickstart with Vue CLI</h5>
|
|
||||||
<p>An <a href="https://github.com/primefaces/primevue-quickstart">example application</a> based on Vue CLI is available at github.</p>
|
|
||||||
|
|
||||||
<h5>Quickstart with Vite</h5>
|
|
||||||
<p>A <a href="https://github.com/primefaces/primevue-quickstart-vite">starter application</a> is also provided for Vite users.</p>
|
|
||||||
|
|
||||||
<h5>Typescript</h5>
|
|
||||||
<p>Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample <a href="https://github.com/primefaces/primevue-typescript-quickstart">typescript-primevue</a> application with Vue CLI is available as at github.</p>
|
|
||||||
<h5>Browser Support</h5>
|
<h5>Browser Support</h5>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table browsers">
|
<table class="doc-table browsers">
|
||||||
|
|
@ -358,6 +347,18 @@ app.use(PrimeVue, {
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h3>Samples</h3>
|
||||||
|
<h5>Typescript</h5>
|
||||||
|
<p>Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample <a href="https://github.com/primefaces/primevue-typescript-quickstart">typescript-primevue</a> application with Vue CLI is available as at github.</p>
|
||||||
|
|
||||||
|
<h5>Quickstart with Vue CLI</h5>
|
||||||
|
<p>An <a href="https://github.com/primefaces/primevue-quickstart">example application</a> based on Vue CLI is available at github.</p>
|
||||||
|
|
||||||
|
<h5>Quickstart with Vite</h5>
|
||||||
|
<p>A <a href="https://github.com/primefaces/primevue-quickstart-vite">starter application</a> is also provided for Vite users.</p>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue