router-link changed to nuxt-link

pull/3420/head
Bahadir Sofuoglu 2022-09-10 17:29:14 +03:00
parent 78f9040681
commit d0887e3005
84 changed files with 181 additions and 181 deletions

View File

@ -1,8 +1,8 @@
<template> <template>
<div :class="['layout-sidebar', {'active': active}]"> <div :class="['layout-sidebar', {'active': active}]">
<router-link to="/" class="logo"> <nuxt-link to="/" class="logo">
<img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo"/> <img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo"/>
</router-link> </nuxt-link>
<div class="layout-sidebar-filter p-fluid"> <div class="layout-sidebar-filter p-fluid">
<AutoComplete v-model="selectedRoute" :suggestions="filteredRoutes" @complete="searchRoute($event)" @item-select="onItemSelect($event)" scrollHeight="300px" placeholder="Search" <AutoComplete v-model="selectedRoute" :suggestions="filteredRoutes" @complete="searchRoute($event)" @item-select="onItemSelect($event)" scrollHeight="300px" placeholder="Search"
field="name" optionGroupLabel="name" optionGroupChildren="children" appendTo="self"> field="name" optionGroupLabel="name" optionGroupChildren="children" appendTo="self">
@ -17,12 +17,12 @@
<div class="menu-items" v-if="item.children && item.children.length"> <div class="menu-items" v-if="item.children && item.children.length">
<template v-for="child of item.children" :key="child.name"> <template v-for="child of item.children" :key="child.name">
<a v-if="child.href" :href="child.href" target="_blank">{{child.name}}</a> <a v-if="child.href" :href="child.href" target="_blank">{{child.name}}</a>
<router-link v-if="child.to" :to="child.to"> <nuxt-link v-if="child.to" :to="child.to">
{{child.name}} {{child.name}}
<Tag v-if="child.badge" :value="child.badge"></Tag> <Tag v-if="child.badge" :value="child.badge"></Tag>
</router-link> </nuxt-link>
<template v-if="child.children"> <template v-if="child.children">
<router-link :to="child.children[0].to" v-slot="{isActive}" custom> <nuxt-link :to="child.children[0].to" v-slot="{isActive}" custom>
<div> <div>
<a tabindex="0" @click="toggleSubmenu($event, child.meta[0])"> <a tabindex="0" @click="toggleSubmenu($event, child.meta[0])">
{{child.name}} {{child.name}}
@ -32,16 +32,16 @@
<div class="p-toggleable-content" v-show="isSubmenuActive(child.meta[0], isActive)"> <div class="p-toggleable-content" v-show="isSubmenuActive(child.meta[0], isActive)">
<ul> <ul>
<li v-for="(submenuitem, i) of child.children" :key="i"> <li v-for="(submenuitem, i) of child.children" :key="i">
<router-link :to="submenuitem.to"> <nuxt-link :to="submenuitem.to">
{{submenuitem.name}} {{submenuitem.name}}
<Tag v-if="submenuitem.badge" :value="submenuitem.badge"></Tag> <Tag v-if="submenuitem.badge" :value="submenuitem.badge"></Tag>
</router-link> </nuxt-link>
</li> </li>
</ul> </ul>
</div> </div>
</transition> </transition>
</div> </div>
</router-link> </nuxt-link>
</template> </template>
</template> </template>
</div> </div>

View File

@ -14,10 +14,10 @@
<transition name="p-connected-overlay" @enter="onMenuEnter"> <transition name="p-connected-overlay" @enter="onMenuEnter">
<ul v-show="activeMenuIndex === 0"> <ul v-show="activeMenuIndex === 0">
<li class="topbar-submenu-header">THEMING</li> <li class="topbar-submenu-header">THEMING</li>
<li><router-link to="/theming"><i class="pi pi-fw pi-file"/><span>Guide</span></router-link></li> <li><nuxt-link to="/theming"><i class="pi pi-fw pi-file"/><span>Guide</span></nuxt-link></li>
<li><a href="https://www.primefaces.org/designer/primevue"><i class="pi pi-fw pi-palette" /><span>Designer</span></a></li> <li><a href="https://www.primefaces.org/designer/primevue"><i class="pi pi-fw pi-palette" /><span>Designer</span></a></li>
<li><a href="https://www.primefaces.org/designer-vue"><i class="pi pi-fw pi-desktop" /><span>Visual Editor</span></a></li> <li><a href="https://www.primefaces.org/designer-vue"><i class="pi pi-fw pi-desktop" /><span>Visual Editor</span></a></li>
<li><router-link to="/icons"><i class="pi pi-fw pi-info-circle"/><span>Icons</span></router-link></li> <li><nuxt-link to="/icons"><i class="pi pi-fw pi-info-circle"/><span>Icons</span></nuxt-link></li>
<li><a href="https://www.figma.com/community/file/890589747170608208/PrimeOne-Design-Library"><i class="pi pi-fw pi-pencil"/><span>Figma UI Kit</span></a></li> <li><a href="https://www.figma.com/community/file/890589747170608208/PrimeOne-Design-Library"><i class="pi pi-fw pi-pencil"/><span>Figma UI Kit</span></a></li>
<li class="topbar-submenu-header">BOOTSTRAP</li> <li class="topbar-submenu-header">BOOTSTRAP</li>
@ -108,7 +108,7 @@
<a tabindex="0" @click="toggleMenu($event, 3)">v3.16.2</a> <a tabindex="0" @click="toggleMenu($event, 3)">v3.16.2</a>
<transition name="p-connected-overlay" @enter="onMenuEnter"> <transition name="p-connected-overlay" @enter="onMenuEnter">
<ul v-show="activeMenuIndex === 3" style="width: 100%"> <ul v-show="activeMenuIndex === 3" style="width: 100%">
<li><router-link to="/"><span class="m-0">v3.16.2</span></router-link></li> <li><nuxt-link to="/"><span class="m-0">v3.16.2</span></nuxt-link></li>
<li><a href="https://www.primefaces.org/primevue-v2"><span class="m-0">v2.10.0</span></a></li> <li><a href="https://www.primefaces.org/primevue-v2"><span class="m-0">v2.10.0</span></a></li>
</ul> </ul>
</transition> </transition>

View File

@ -376,7 +376,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -325,7 +325,7 @@ export default {
<td>virtualScrollerOptions</td> <td>virtualScrollerOptions</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td> <td>Whether to use the virtualScroller feature. The properties of <nuxt-link to="/virtualscroller">VirtualScroller</nuxt-link> component can be used like an object in it.</td>
</tr> </tr>
<tr> <tr>
<td>autoOptionFocus</td> <td>autoOptionFocus</td>

View File

@ -51,7 +51,7 @@ import AvatarGroup from 'primevue/avatargroup';
</code></pre> </code></pre>
<h5>Badge</h5> <h5>Badge</h5>
<p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p> <p>A badge can be added to an Avatar with the <nuxt-link to="/badge">Badge</nuxt-link> directive.</p>
<pre v-code><code> <pre v-code><code>
&lt;Avatar image="user.png" size="xlarge" v-badge.danger="4" /&gt; &lt;Avatar image="user.png" size="xlarge" v-badge.danger="4" /&gt;
@ -137,7 +137,7 @@ import AvatarGroup from 'primevue/avatargroup';
</div> </div>
<h5>Styling of Avatar</h5> <h5>Styling of Avatar</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -138,7 +138,7 @@ app.directive('badge', BadgeDirective);
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -121,7 +121,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -14,7 +14,7 @@ import Breadcrumb from 'primevue/breadcrumb';
</code></pre> </code></pre>
<h5>MenuModel</h5> <h5>MenuModel</h5>
<p>Breadcrumb uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>Breadcrumb uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Breadcrumb requires a collection of menuitems as its model and a home item.</p> <p>Breadcrumb requires a collection of menuitems as its model and a home item.</p>
@ -52,13 +52,13 @@ export default {
</template> </template>
</code></pre> </code></pre>
<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p> <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;Breadcrumb :home="home" :model="items"&gt; &lt;Breadcrumb :home="home" :model="items"&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt; &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt; &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
&lt;/router-link&gt; &lt;/nuxt-link&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Breadcrumb&gt; &lt;/Breadcrumb&gt;
</template> </template>
@ -93,7 +93,7 @@ export default {
<td>exact</td> <td>exact</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td> <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -118,7 +118,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -94,7 +94,7 @@ import Button from 'primevue/button';
</code></pre> </code></pre>
<h5>Badges</h5> <h5>Badges</h5>
<p>Badge is a small status indicator for a button. Refer to the <router-link to="/badge">badge</router-link> documentation for available styling options.</p> <p>Badge is a small status indicator for a button. Refer to the <nuxt-link to="/badge">badge</nuxt-link> documentation for available styling options.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button type="button" label="Emails" badge="8" /&gt; &lt;Button type="button" label="Emails" badge="8" /&gt;
@ -116,7 +116,7 @@ import Button from 'primevue/button';
<h5>Sizes</h5> <h5>Sizes</h5>
<p> <p>
2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>. Note that these classes available to change the size of a particular button, for global 2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>. Note that these classes available to change the size of a particular button, for global
scaling see the <router-link to="/theming">theming</router-link> page. scaling see the <nuxt-link to="/theming">theming</nuxt-link> page.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;Button label="Small" icon="pi pi-check" class="p-button-sm" /&gt; &lt;Button label="Small" icon="pi pi-check" class="p-button-sm" /&gt;
@ -212,7 +212,7 @@ import Button from 'primevue/button';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -51,7 +51,7 @@ export default {
</code></pre> </code></pre>
<h5>DateFormat</h5> <h5>DateFormat</h5>
<p>Default date format is mm/dd/yy, to customize this use <i>dateFormat</i> property or define it at <router-link to="/locale">PrimeVue Locale</router-link> globally. Note that standalone property overrides the value in locale settings.</p> <p>Default date format is mm/dd/yy, to customize this use <i>dateFormat</i> property or define it at <nuxt-link to="/locale">PrimeVue Locale</nuxt-link> globally. Note that standalone property overrides the value in locale settings.</p>
<pre v-code><code> <pre v-code><code>
&lt;Calendar v-model="value" dateFormat="dd.mm.yy" /&gt; &lt;Calendar v-model="value" dateFormat="dd.mm.yy" /&gt;
@ -116,7 +116,7 @@ export default {
</code></pre> </code></pre>
<h5>Locale</h5> <h5>Locale</h5>
<p>Locale for different languages and formats is defined globally, refer to the <router-link to="/locale">PrimeVue Locale</router-link> configuration for more information.</p> <p>Locale for different languages and formats is defined globally, refer to the <nuxt-link to="/locale">PrimeVue Locale</nuxt-link> configuration for more information.</p>
<h5>Custom Content</h5> <h5>Custom Content</h5>
<p>Calendar UI accepts custom content using header and footer templates.</p> <p>Calendar UI accepts custom content using header and footer templates.</p>
@ -201,7 +201,7 @@ export default {
<td>dateFormat</td> <td>dateFormat</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Format of the date. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Format of the date. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>inline</td> <td>inline</td>
@ -617,7 +617,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
@ -687,7 +687,7 @@ export default {
</p> </p>
<p> <p>
The optional calendar button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the The optional calendar button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the
<i>chooseDate</i> key of the aria property from the <router-link to="/locale">locale</router-link> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and appended <i>chooseDate</i> key of the aria property from the <nuxt-link to="/locale">locale</nuxt-link> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and appended
to the label to be able to notify users about the current value. to the label to be able to notify users about the current value.
</p> </p>

View File

@ -70,7 +70,7 @@ import Card from 'primevue/card';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -21,7 +21,7 @@
<Card style="width: 25em"> <Card style="width: 25em">
<template #header> <template #header>
<img alt="user header" src="demo/images/usercard.png" /> <img alt="user header" src="/demo/images/usercard.png" />
</template> </template>
<template #title> Advanced Card </template> <template #title> Advanced Card </template>
<template #subtitle> Card subtitle </template> <template #subtitle> Card subtitle </template>

View File

@ -260,7 +260,7 @@ data() {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -427,7 +427,7 @@ data() &#123;
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -176,7 +176,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -106,7 +106,7 @@ import Chip from 'primevue/chip';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -168,7 +168,7 @@ import Chips from 'primevue/chips';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -179,13 +179,13 @@ export default {
<td>acceptLabel</td> <td>acceptLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the accept button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>rejectLabel</td> <td>rejectLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the reject button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>acceptIcon</td> <td>acceptIcon</td>
@ -300,7 +300,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p> <p>ConfirmDialog inherits all the classes from the Dialog component, visit <nuxt-link to="/dialog">dialog</nuxt-link> for more information.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -164,13 +164,13 @@ export default {
<td>acceptLabel</td> <td>acceptLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the accept button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>rejectLabel</td> <td>rejectLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the reject button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>acceptIcon</td> <td>acceptIcon</td>
@ -267,7 +267,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p> <p>ConfirmDialog inherits all the classes from the Dialog component, visit <nuxt-link to="/dialog">dialog</nuxt-link> for more information.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -14,7 +14,7 @@ import ContextMenu from 'primevue/contextmenu';
</code></pre> </code></pre>
<h5>MenuModel</h5> <h5>MenuModel</h5>
<p>ContextMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>ContextMenu uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>ContextMenu requires a collection of menuitems as its model.</p> <p>ContextMenu requires a collection of menuitems as its model.</p>
@ -202,13 +202,13 @@ export default {
</template> </template>
</code></pre> </code></pre>
<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p> <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;ContextMenu :model="items"&gt; &lt;ContextMenu :model="items"&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt; &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt; &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
&lt;/router-link&gt; &lt;/nuxt-link&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/ContextMenu&gt; &lt;/ContextMenu&gt;
</template> </template>
@ -261,7 +261,7 @@ export default {
<td>exact</td> <td>exact</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td> <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -316,7 +316,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -620,7 +620,7 @@ export default {
<h5>Pagination</h5> <h5>Pagination</h5>
<p> <p>
Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page. See the <router-link to="/paginator">Paginator</router-link> for the available customization Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page. See the <nuxt-link to="/paginator">Paginator</nuxt-link> for the available customization
options such as paginator templates, page links, rows per page options and more which can be passed through the DataTable. options such as paginator templates, page links, rows per page options and more which can be passed through the DataTable.
</p> </p>
@ -1011,7 +1011,7 @@ matchModes: [
</code></pre> </code></pre>
<h6>Full Page Scroll</h6> <h6>Full Page Scroll</h6>
<p>FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size. See the <router-link to="/datatable/flexscroll">full page</router-link> demo for an example.</p> <p>FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size. See the <nuxt-link to="/datatable/flexscroll">full page</nuxt-link> demo for an example.</p>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;div style="height: calc(100vh - 143px)"&gt; &lt;div style="height: calc(100vh - 143px)"&gt;
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt; &lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt;
@ -1093,7 +1093,7 @@ matchModes: [
<h6>Scrollable RowGroup</h6> <h6>Scrollable RowGroup</h6>
<p> <p>
Row groups with subheaders have exclusive support for filtering, when the table scrolls the subheaders stay fixed as long as their data are still displayed. No additional configuration is required to enable this feature. View the Row groups with subheaders have exclusive support for filtering, when the table scrolls the subheaders stay fixed as long as their data are still displayed. No additional configuration is required to enable this feature. View the
<router-link to="/datatable/rowgroup">Row Group</router-link> demo for an example. <nuxt-link to="/datatable/rowgroup">Row Group</nuxt-link> demo for an example.
</p> </p>
<h5>Lazy Loading</h5> <h5>Lazy Loading</h5>
@ -1107,7 +1107,7 @@ matchModes: [
Note that, in lazy filtering totalRecords should also be updated to align the data with the paginator. Note that, in lazy filtering totalRecords should also be updated to align the data with the paginator.
</p> </p>
<p>Visit the <router-link to="/datatable/lazy">lazy loading</router-link> demo for an example with a remote datasource.</p> <p>Visit the <nuxt-link to="/datatable/lazy">lazy loading</nuxt-link> demo for an example with a remote datasource.</p>
<h5>Row Expansion</h5> <h5>Row Expansion</h5>
<p> <p>
@ -1946,7 +1946,7 @@ export default {
FirstPageLink PrevPageLink PageLinks <br /> FirstPageLink PrevPageLink PageLinks <br />
NextPageLink LastPageLink RowsPerPageDropdown NextPageLink LastPageLink RowsPerPageDropdown
</td> </td>
<td>Template of the paginator. See the <router-link to="/paginator">Paginator</router-link> for all available options.</td> <td>Template of the paginator. See the <nuxt-link to="/paginator">Paginator</nuxt-link> for all available options.</td>
</tr> </tr>
<tr> <tr>
<td>pageLinkSize</td> <td>pageLinkSize</td>
@ -2233,7 +2233,7 @@ export default {
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td> <td>
Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it. <br /><b>Note:</b> Currently only vertical Whether to use the virtualScroller feature. The properties of <nuxt-link to="/virtualscroller">VirtualScroller</nuxt-link> component can be used like an object in it. <br /><b>Note:</b> Currently only vertical
orientation mode is supported. orientation mode is supported.
</td> </td>
</tr> </tr>

View File

@ -304,7 +304,7 @@ export default {
<td>paginatorTemplate</td> <td>paginatorTemplate</td>
<td>string</td> <td>string</td>
<td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td> <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
<td>Template of the paginator. See the <router-link to="/paginator">Paginator</router-link> for all available options.</td> <td>Template of the paginator. See the <nuxt-link to="/paginator">Paginator</nuxt-link> for all available options.</td>
</tr> </tr>
<tr> <tr>
<td>pageLinkSize</td> <td>pageLinkSize</td>
@ -426,7 +426,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -308,7 +308,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -111,7 +111,7 @@ import Divider from 'primevue/divider';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -51,7 +51,7 @@ import Dock from 'primevue/dock';
</code></pre> </code></pre>
<h5>MenuModel API</h5> <h5>MenuModel API</h5>
<p>Dock uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>Dock uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
@ -94,20 +94,20 @@ import Dock from 'primevue/dock';
<td>exact</td> <td>exact</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td> <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
</tr> </tr>
<tr> <tr>
<td>tooltipOptions</td> <td>tooltipOptions</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Whether to display the tooltip on items. The modifiers of <router-link to="/tooltip">Tooltip</router-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td> <td>Whether to display the tooltip on items. The modifiers of <nuxt-link to="/tooltip">Tooltip</nuxt-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -324,7 +324,7 @@ export default {
<td>virtualScrollerOptions</td> <td>virtualScrollerOptions</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td> <td>Whether to use the virtualScroller feature. The properties of <nuxt-link to="/virtualscroller">VirtualScroller</nuxt-link> component can be used like an object in it.</td>
</tr> </tr>
<tr> <tr>
<td>autoOptionFocus</td> <td>autoOptionFocus</td>
@ -557,7 +557,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -160,7 +160,7 @@ export default {
</code></pre> </code></pre>
<h5>Customizing a Dialog</h5> <h5>Customizing a Dialog</h5>
<p><i>props</i> option is used to customize the dynamically generated Dialog, refer to the <router-link to="/dialog">Dialog</router-link> documentation for the whole list of options.</p> <p><i>props</i> option is used to customize the dynamically generated Dialog, refer to the <nuxt-link to="/dialog">Dialog</nuxt-link> documentation for the whole list of options.</p>
<pre v-code.script><code> <pre v-code.script><code>
import { h } from 'vue'; import { h } from 'vue';

View File

@ -149,7 +149,7 @@ import Fieldset from 'primevue/fieldset';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -186,25 +186,25 @@ myUploader(event) {
<td>chooseLabel</td> <td>chooseLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Label of the choose button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the choose button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>uploadLabel</td> <td>uploadLabel</td>
<td>string</td> <td>string</td>
<td>Upload</td> <td>Upload</td>
<td>Label of the upload button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the upload button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>cancelLabel</td> <td>cancelLabel</td>
<td>string</td> <td>string</td>
<td>Cancel</td> <td>Cancel</td>
<td>Label of the cancel button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the cancel button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>customUpload</td> <td>customUpload</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>showUploadButton</td> <td>showUploadButton</td>
@ -352,7 +352,7 @@ myUploader(event) {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -435,7 +435,7 @@ responsiveOptions: [
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -119,7 +119,7 @@ import Image from 'primevue/image';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -3,7 +3,7 @@
<div class="content-section introduction"> <div class="content-section introduction">
<div class="feature-intro"> <div class="feature-intro">
<h1>Image</h1> <h1>Image</h1>
<p>Displays an image with preview and tranformation options. For multiple image, see <router-link to="galleria">Galleria</router-link>.</p> <p>Displays an image with preview and tranformation options. For multiple image, see <nuxt-link to="galleria">Galleria</nuxt-link>.</p>
</div> </div>
<AppDemoActions /> <AppDemoActions />
</div> </div>

View File

@ -167,7 +167,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -100,7 +100,7 @@ import InputMask from 'primevue/inputmask';
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p> <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -397,7 +397,7 @@ Vertical
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -135,7 +135,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -53,7 +53,7 @@ import InputText from 'primevue/inputtext';
<h5>Sizes</h5> <h5>Sizes</h5>
<p> <p>
2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>. Note that these classes are mainly be used to change the size of a particular field, 2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>. Note that these classes are mainly be used to change the size of a particular field,
for global scaling see the <router-link to="/theming">theming</router-link> page. for global scaling see the <nuxt-link to="/theming">theming</nuxt-link> page.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;InputText type="text" class="p-inputtext-sm" placeholder="Small" /&gt; &lt;InputText type="text" class="p-inputtext-sm" placeholder="Small" /&gt;
@ -114,7 +114,7 @@ import InputText from 'primevue/inputtext';
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p> <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -181,7 +181,7 @@ data() {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -5,7 +5,7 @@
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mb-5">General</li> <li class="font-bold mb-5">General</li>
<li class="mb-4"> <li class="mb-4">
<router-link to="/setup" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</router-link> <nuxt-link to="/setup" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</nuxt-link>
</li> </li>
</ul> </ul>
</div> </div>
@ -19,7 +19,7 @@
<a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Discord</a> <a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Discord</a>
</li> </li>
<li class="mb-4"> <li class="mb-4">
<router-link to="/support" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO Support</router-link> <nuxt-link to="/support" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO Support</nuxt-link>
</li> </li>
</ul> </ul>
</div> </div>
@ -53,13 +53,13 @@
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li> <li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
<li class="mb-4"> <li class="mb-4">
<router-link to="/theming" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</router-link> <nuxt-link to="/theming" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</nuxt-link>
</li> </li>
<li class="mb-4"> <li class="mb-4">
<a href="https://www.primefaces.org/designer/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a> <a href="https://www.primefaces.org/designer/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a>
</li> </li>
<li class="mb-4"> <li class="mb-4">
<router-link to="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</router-link> <nuxt-link to="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</nuxt-link>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -32,7 +32,7 @@
</div> </div>
</div> </div>
</div> </div>
<router-link to="/setup"> <nuxt-link to="/setup">
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation logo hidden md:flex my-4 align-items-center justify-content-center"> <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation logo hidden md:flex my-4 align-items-center justify-content-center">
<div class="hero-box-inner text-center"> <div class="hero-box-inner text-center">
<img src="demo/images/landing/overview-icon.svg" alt="primevue main" /> <img src="demo/images/landing/overview-icon.svg" alt="primevue main" />
@ -41,7 +41,7 @@
</div> </div>
</div> </div>
</div> </div>
</router-link> </nuxt-link>
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/primeflex')"> <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/primeflex')">
<div class="flex flex-column align-items-center"> <div class="flex flex-column align-items-center">
<img src="demo/images/landing/css-icon.svg" alt="primevue icons" /> <img src="demo/images/landing/css-icon.svg" alt="primevue icons" />
@ -62,7 +62,7 @@
</div> </div>
</div> </div>
</div> </div>
<router-link to="/icons"> <nuxt-link to="/icons">
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 md:mt-4 align-items-center justify-content-center"> <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 md:mt-4 align-items-center justify-content-center">
<div class="flex flex-column align-items-center"> <div class="flex flex-column align-items-center">
<img src="demo/images/landing/icons-icon.svg" alt="primevue templates" /> <img src="demo/images/landing/icons-icon.svg" alt="primevue templates" />
@ -72,7 +72,7 @@
</div> </div>
</div> </div>
</div> </div>
</router-link> </nuxt-link>
</div> </div>
</div> </div>
<div class="hero-border-top hidden md:block"></div> <div class="hero-border-top hidden md:block"></div>

View File

@ -247,7 +247,7 @@ export default {
<td>virtualScrollerOptions</td> <td>virtualScrollerOptions</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td> <td>Whether to use the virtualScroller feature. The properties of <nuxt-link to="/virtualscroller">VirtualScroller</nuxt-link> component can be used like an object in it.</td>
</tr> </tr>
<tr> <tr>
<td>autoOptionFocus</td> <td>autoOptionFocus</td>
@ -418,7 +418,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -14,7 +14,7 @@ import MegaMenu from 'primevue/megamenu';
</code></pre> </code></pre>
<h5>MenuModel</h5> <h5>MenuModel</h5>
<p>MegaMenu uses the common MenuModel API to define the items of the model, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>MegaMenu uses the common MenuModel API to define the items of the model, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
<pre v-code><code> <pre v-code><code>
&lt;MegaMenu :model="items" /&gt; &lt;MegaMenu :model="items" /&gt;
@ -166,13 +166,13 @@ export default {
</template> </template>
</code></pre> </code></pre>
<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p> <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;MegaMenu :model="items"&gt; &lt;MegaMenu :model="items"&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt; &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;{{route.fullPath}}&lt;/a&gt; &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;{{route.fullPath}}&lt;/a&gt;
&lt;/router-link&gt; &lt;/nuxt-link&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/MegaMenu&gt; &lt;/MegaMenu&gt;
</template> </template>
@ -207,7 +207,7 @@ export default {
<td>exact</td> <td>exact</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td> <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -240,7 +240,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -13,7 +13,7 @@ import Menu from 'primevue/menu';
</code></pre> </code></pre>
<h5>MenuModel</h5> <h5>MenuModel</h5>
<p>Menu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>Menu uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Menu requires a collection of menuitems as its model.</p> <p>Menu requires a collection of menuitems as its model.</p>
@ -103,13 +103,13 @@ toggle(event) {
</template> </template>
</code></pre> </code></pre>
<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p> <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;Menu :model="items"&gt; &lt;Menu :model="items"&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt; &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;{{route.fullPath}}&lt;/a&gt; &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;{{route.fullPath}}&lt;/a&gt;
&lt;/router-link&gt; &lt;/nuxt-link&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Menu&gt; &lt;/Menu&gt;
</template> </template>
@ -162,7 +162,7 @@ toggle(event) {
<td>exact</td> <td>exact</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td> <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -242,7 +242,7 @@ toggle(event) {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -14,7 +14,7 @@ import Menubar from 'primevue/menubar';
</code></pre> </code></pre>
<h5>MenuModel</h5> <h5>MenuModel</h5>
<p>Menubar uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>Menubar uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Menubar requires a collection of menuitems as its model.</p> <p>Menubar requires a collection of menuitems as its model.</p>
@ -175,13 +175,13 @@ export default {
</template> </template>
</code></pre> </code></pre>
<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p> <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;Menubar :model="items"&gt; &lt;Menubar :model="items"&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt; &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;{{route.fullPath}}&lt;/a&gt; &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;{{route.fullPath}}&lt;/a&gt;
&lt;/router-link&gt; &lt;/nuxt-link&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Menubar&gt; &lt;/Menubar&gt;
</template> </template>
@ -210,7 +210,7 @@ export default {
<td>exact</td> <td>exact</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td> <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -243,7 +243,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -168,7 +168,7 @@ import InlineMessage from 'primevue/inlinemessage';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<strong>Message</strong> <strong>Message</strong>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">

View File

@ -345,7 +345,7 @@ export default {
<td>virtualScrollerOptions</td> <td>virtualScrollerOptions</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td> <td>Whether to use the virtualScroller feature. The properties of <nuxt-link to="/virtualscroller">VirtualScroller</nuxt-link> component can be used like an object in it.</td>
</tr> </tr>
<tr> <tr>
<td>autoOptionFocus</td> <td>autoOptionFocus</td>
@ -589,7 +589,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
@ -649,12 +649,12 @@ export default {
<p> <p>
Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the <i>selectAll</i> and <i>unselectAll</i> keys of the <i>aria</i> property from the Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the <i>selectAll</i> and <i>unselectAll</i> keys of the <i>aria</i> property from the
<router-link to="/locale">locale</router-link> API. <nuxt-link to="/locale">locale</nuxt-link> API.
</p> </p>
<p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element.</p> <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element.</p>
<p>Close button uses <i>close</i> key of the <i>aria</i> property from the <router-link to="/locale">locale</router-link> API as the <i>aria-label</i> by default, this can be overriden with the <i>closeButtonProps</i>.</p> <p>Close button uses <i>close</i> key of the <i>aria</i> property from the <nuxt-link to="/locale">locale</nuxt-link> API as the <i>aria-label</i> by default, this can be overriden with the <i>closeButtonProps</i>.</p>
<pre v-code><code> <pre v-code><code>
&lt;span id="dd1"&gt;Options&lt;/span&gt; &lt;span id="dd1"&gt;Options&lt;/span&gt;
&lt;MultiSelect aria-labelledby="dd1" /&gt; &lt;MultiSelect aria-labelledby="dd1" /&gt;

View File

@ -204,7 +204,7 @@ import OrderList from 'primevue/orderlist';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -440,7 +440,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -173,7 +173,7 @@ toggle(event) {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -221,7 +221,7 @@ onPage(event) {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -169,7 +169,7 @@ import Panel from 'primevue/panel';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -14,7 +14,7 @@ import PanelMenu from 'primevue/panelmenu';
</code></pre> </code></pre>
<h5>MenuModel</h5> <h5>MenuModel</h5>
<p>PanelMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>PanelMenu uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>PanelMenu requires a collection of menuitems as its model.</p> <p>PanelMenu requires a collection of menuitems as its model.</p>
@ -163,13 +163,13 @@ export default {
</template> </template>
</code></pre> </code></pre>
<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p> <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;PanelMenu :model="items"&gt; &lt;PanelMenu :model="items"&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt; &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;{{route.fullPath}}&lt;/a&gt; &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;{{route.fullPath}}&lt;/a&gt;
&lt;/router-link&gt; &lt;/nuxt-link&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/PanelMenu&gt; &lt;/PanelMenu&gt;
</template> </template>
@ -401,7 +401,7 @@ export default {
<td>exact</td> <td>exact</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td> <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -426,7 +426,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -92,7 +92,7 @@ import Password from 'primevue/password';
<td>promptLabel</td> <td>promptLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Text to prompt password entry. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Text to prompt password entry. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>mediumRegex</td> <td>mediumRegex</td>
@ -110,19 +110,19 @@ import Password from 'primevue/password';
<td>weakLabel</td> <td>weakLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Text for a weak password. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Text for a weak password. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>mediumLabel</td> <td>mediumLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Text for a medium password. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Text for a medium password. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>strongLabel</td> <td>strongLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Text for a strong password. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Text for a strong password. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>feedback</td> <td>feedback</td>
@ -254,7 +254,7 @@ import Password from 'primevue/password';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -284,7 +284,7 @@ import PickList from 'primevue/picklist';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -78,7 +78,7 @@ data() {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -78,7 +78,7 @@ import ProgressSpinner from 'primevue/progressspinner';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -134,7 +134,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -111,7 +111,7 @@ import Rating from 'primevue/rating';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
@ -144,7 +144,7 @@ import Rating from 'primevue/rating';
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the <router-link to="/locale">locale</router-link> API via <i>star</i> and <i>stars</i> of the Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the <nuxt-link to="/locale">locale</nuxt-link> API via <i>star</i> and <i>stars</i> of the
<i>aria</i> property. <i>aria</i> property.
</p> </p>

View File

@ -81,7 +81,7 @@ import ScrollPanel from 'primevue/scrollpanel';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -79,7 +79,7 @@ import ScrollTop from 'primevue/scrolltop';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -306,7 +306,7 @@ app.use(PrimeVue, {
</code></pre> </code></pre>
<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 <nuxt-link to="/locale">Locale</nuxt-link> documentation for more information.</p>
<h5>Browser Support</h5> <h5>Browser Support</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">

View File

@ -159,7 +159,7 @@ import Sidebar from 'primevue/sidebar';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -103,7 +103,7 @@ import Skeleton from 'primevue/skeleton';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -154,7 +154,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -66,7 +66,7 @@ items: [
</code></pre> </code></pre>
<h5>MenuModel API</h5> <h5>MenuModel API</h5>
<p>SpeedDial uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>SpeedDial uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
<h5>Type</h5> <h5>Type</h5>
<p>SpeedDial has 4 types; <i>linear</i>, <i>circle</i>, <i>semi-circle</i> and <i>quarter-circle</i>.</p> <p>SpeedDial has 4 types; <i>linear</i>, <i>circle</i>, <i>semi-circle</i> and <i>quarter-circle</i>.</p>
@ -196,7 +196,7 @@ items: [
<td>tooltipOptions</td> <td>tooltipOptions</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Whether to display the tooltip on items. The modifiers of <router-link to="/tooltip">Tooltip</router-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td> <td>Whether to display the tooltip on items. The modifiers of <nuxt-link to="/tooltip">Tooltip</nuxt-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -255,7 +255,7 @@ items: [
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -59,7 +59,7 @@ export default {
</code></pre> </code></pre>
<h5>MenuModel</h5> <h5>MenuModel</h5>
<p>SplitButton uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>SplitButton uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
<h5>Severity</h5> <h5>Severity</h5>
<p>Different color options are available as severity levels.</p> <p>Different color options are available as severity levels.</p>
@ -190,7 +190,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -241,7 +241,7 @@ import SplitterPanel from 'primevue/splitterpanel';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -14,7 +14,7 @@ import Steps from 'primevue/steps';
</code></pre> </code></pre>
<h5>MenuModel</h5> <h5>MenuModel</h5>
<p>Steps uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>Steps uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Steps is integrated with Vue Router and requires a collection of menuitems as its model.</p> <p>Steps is integrated with Vue Router and requires a collection of menuitems as its model.</p>
@ -69,13 +69,13 @@ export default {
</template> </template>
</code></pre> </code></pre>
<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p> <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;Steps :model="items"&gt; &lt;Steps :model="items"&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt; &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt; &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
&lt;/router-link&gt; &lt;/nuxt-link&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Steps&gt; &lt;/Steps&gt;
</template> </template>
@ -116,7 +116,7 @@ export default {
<td>exact</td> <td>exact</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td> <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -141,7 +141,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -14,7 +14,7 @@ import TabMenu from 'primevue/tabmenu';
</code></pre> </code></pre>
<h5>MenuModel</h5> <h5>MenuModel</h5>
<p>TabMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>TabMenu uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>TabMenu requires a collection of menuitems as its model.</p> <p>TabMenu requires a collection of menuitems as its model.</p>
@ -166,7 +166,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -361,7 +361,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -88,7 +88,7 @@ import Tag from 'primevue/tag';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -93,7 +93,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -60,7 +60,7 @@ import Textarea from 'primevue/textarea';
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p> <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -13,7 +13,7 @@ import TieredMenu from 'primevue/tieredmenu';
</code></pre> </code></pre>
<h5>MenuModel</h5> <h5>MenuModel</h5>
<p>TieredMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>TieredMenu uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>TieredMenu requires a collection of menuitems as its model.</p> <p>TieredMenu requires a collection of menuitems as its model.</p>
@ -187,13 +187,13 @@ toggle(event) {
</template> </template>
</code></pre> </code></pre>
<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p> <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;TieredMenu :model="items"&gt; &lt;TieredMenu :model="items"&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt; &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt; &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
&lt;/router-link&gt; &lt;/nuxt-link&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/TieredMenu&gt; &lt;/TieredMenu&gt;
</template> </template>
@ -246,7 +246,7 @@ toggle(event) {
<td>exact</td> <td>exact</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td> <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -301,7 +301,7 @@ toggle(event) {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -221,7 +221,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -317,7 +317,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -159,7 +159,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -56,7 +56,7 @@ import Toolbar from 'primevue/toolbar';
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -106,7 +106,7 @@ directives: {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -731,7 +731,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -479,7 +479,7 @@ data() {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -791,7 +791,7 @@ export default {
<h5>Pagination</h5> <h5>Pagination</h5>
<p> <p>
Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page. See the <router-link to="/paginator">Paginator</router-link> for the available customization Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page. See the <nuxt-link to="/paginator">Paginator</nuxt-link> for the available customization
options such as paginator templates, page links, rows per page options and more which can be passed through the TreeTable. options such as paginator templates, page links, rows per page options and more which can be passed through the TreeTable.
</p> </p>
@ -1395,7 +1395,7 @@ export default {
FirstPageLink PrevPageLink PageLinks <br /> FirstPageLink PrevPageLink PageLinks <br />
NextPageLink LastPageLink RowsPerPageDropdown NextPageLink LastPageLink RowsPerPageDropdown
</td> </td>
<td>Template of the paginator. See the <router-link to="/paginator">Paginator</router-link> for all available options.</td> <td>Template of the paginator. See the <nuxt-link to="/paginator">Paginator</nuxt-link> for all available options.</td>
</tr> </tr>
<tr> <tr>
<td>pageLinkSize</td> <td>pageLinkSize</td>
@ -1677,7 +1677,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

View File

@ -71,7 +71,7 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
<p>Any valid event such as focus and blur.</p> <p>Any valid event such as focus and blur.</p>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
@ -106,7 +106,7 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
<p> <p>
TriStateCheckbox component uses an element with <i>checkbox</i> role. Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Component adds an element with <i>aria-live</i> attribute TriStateCheckbox component uses an element with <i>checkbox</i> role. Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Component adds an element with <i>aria-live</i> attribute
that is only visible to screen readers to read the value displayed. Values to read are defined with the <i>trueLabel</i>, <i>falseLabel</i> and <i>nullLabel</i> keys of the <i>aria</i> property from the that is only visible to screen readers to read the value displayed. Values to read are defined with the <i>trueLabel</i>, <i>falseLabel</i> and <i>nullLabel</i> keys of the <i>aria</i> property from the
<router-link to="/locale">locale</router-link> API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification. <nuxt-link to="/locale">locale</nuxt-link> API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.
</p> </p>
<pre v-code><code> <pre v-code><code>

View File

@ -360,7 +360,7 @@ export default {
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>