Changes for ssr
Bahadır Sofuoğlu
parent
6c9f6323d5
commit
cc98fb55eb
2
app.vue
2
app.vue
|
|
@ -64,7 +64,7 @@ export default {
|
||||||
linkElement.remove();
|
linkElement.remove();
|
||||||
cloneLinkElement.setAttribute('id', elementId);
|
cloneLinkElement.setAttribute('id', elementId);
|
||||||
});
|
});
|
||||||
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
|
linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling);
|
||||||
|
|
||||||
this.$appState.theme = event.theme;
|
this.$appState.theme = event.theme;
|
||||||
this.$appState.darkTheme = event.dark;
|
this.$appState.darkTheme = event.dark;
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,21 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="landingClass">
|
<ClientOnly>
|
||||||
<div class="landing-intro">
|
<div :class="landingClass">
|
||||||
<AppNews v-if="$appState.newsActive" />
|
<div class="landing-intro">
|
||||||
<HeaderSection @theme-toggle="onThemeToggle" />
|
<AppNews v-if="$appState.newsActive" />
|
||||||
<HeroSection />
|
<HeaderSection @theme-toggle="onThemeToggle" />
|
||||||
|
<HeroSection />
|
||||||
|
</div>
|
||||||
|
<ComponentSection />
|
||||||
|
<ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
|
||||||
|
<BlockSection />
|
||||||
|
<DesignerSection />
|
||||||
|
<TemplateSection />
|
||||||
|
<UsersSection />
|
||||||
|
<FeaturesSection />
|
||||||
|
<FooterSection />
|
||||||
</div>
|
</div>
|
||||||
<ComponentSection />
|
</ClientOnly>
|
||||||
<ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
|
|
||||||
<BlockSection />
|
|
||||||
<DesignerSection />
|
|
||||||
<TemplateSection />
|
|
||||||
<UsersSection />
|
|
||||||
<FeaturesSection />
|
|
||||||
<FooterSection />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -6,23 +6,24 @@
|
||||||
<p>PrimeVue is a rich set of open source native components for Vue.</p>
|
<p>PrimeVue is a rich set of open source native components for Vue.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-section documentation">
|
<ClientOnly>
|
||||||
<h3>Module Loader</h3>
|
<div class="content-section documentation">
|
||||||
<p>
|
<h3>Module Loader</h3>
|
||||||
This is the recommended way if your application uses <a href="https://cli.vuejs.org">Vue CLI</a>, <a href="https://vitejs.dev">Vite</a> or has a webpack based build with
|
<p>
|
||||||
<a href="https://github.com/vuejs/vue-loader">vue-loader</a> configured.
|
This is the recommended way if your application uses <a href="https://cli.vuejs.org">Vue CLI</a>, <a href="https://vitejs.dev">Vite</a> or has a webpack based build with
|
||||||
</p>
|
<a href="https://github.com/vuejs/vue-loader">vue-loader</a> configured.
|
||||||
|
</p>
|
||||||
|
|
||||||
<p>PrimeVue is available at <a href="https://www.npmjs.com/package/primevue">npm</a>, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project.</p>
|
<p>PrimeVue is available at <a href="https://www.npmjs.com/package/primevue">npm</a>, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project.</p>
|
||||||
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
npm install primevue@^3 --save
|
npm install primevue@^3 --save
|
||||||
npm install primeicons --save
|
npm install primeicons --save
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<p>Next step is setting up PrimeVue configuration.</p>
|
<p>Next step is setting up PrimeVue configuration.</p>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import {createApp} from 'vue';
|
import {createApp} from 'vue';
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
import PrimeVue from 'primevue/config';
|
import PrimeVue from 'primevue/config';
|
||||||
|
|
@ -32,8 +33,8 @@ app.use(PrimeVue);
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<p>Then import and register a component from the library. Import path is available in the documentation of the corresponding component.</p>
|
<p>Then import and register a component from the library. Import path is available in the documentation of the corresponding component.</p>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import {createApp} from 'vue';
|
import {createApp} from 'vue';
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
import PrimeVue from 'primevue/config';
|
import PrimeVue from 'primevue/config';
|
||||||
|
|
@ -46,31 +47,31 @@ app.component('Dialog', Dialog);
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<p>Finally you'll be able to utilize the component in your application. See the <b>Styles</b> section to apply styling.</p>
|
<p>Finally you'll be able to utilize the component in your application. See the <b>Styles</b> section to apply styling.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Dialog></Dialog>
|
<Dialog></Dialog>
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<p>Watch the video tutorial that goes through these steps.</p>
|
<p>Watch the video tutorial that goes through these steps.</p>
|
||||||
<div class="video-container">
|
<div class="video-container">
|
||||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/FjYesOz95MM" frameborder="0" allowfullscreen></iframe>
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/FjYesOz95MM" frameborder="0" allowfullscreen></iframe>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Single File Components</h5>
|
<h5>Single File Components</h5>
|
||||||
<p>
|
<p>
|
||||||
SFC files are available in the npm distribution and if you'd like to use SFCs directly, add <i>/sfc</i> as a suffix when referencing an import path. This will instruct your bundler to process the *.vue files in your local build
|
SFC files are available in the npm distribution and if you'd like to use SFCs directly, add <i>/sfc</i> as a suffix when referencing an import path. This will instruct your bundler to process the *.vue files in your local build
|
||||||
instead of using the compiled output. One use case for this approach is optimizing for SSR by removing whitespaces.
|
instead of using the compiled output. One use case for this approach is optimizing for SSR by removing whitespaces.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import Dialog from 'primevue/dialog/sfc';
|
import Dialog from 'primevue/dialog/sfc';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h3>Script Tag</h3>
|
<h3>Script Tag</h3>
|
||||||
<p>Other alternative is utilizing the components directly within the browser with the <i>iife</i> build. Note that PrimeVue does not provide a <i>umd</i> build.</p>
|
<p>Other alternative is utilizing the components directly within the browser with the <i>iife</i> build. Note that PrimeVue does not provide a <i>umd</i> build.</p>
|
||||||
<pre v-code><code><template v-pre>
|
<pre v-code><code><template v-pre>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
@ -113,19 +114,19 @@ import Dialog from 'primevue/dialog/sfc';
|
||||||
</template>
|
</template>
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h3>Styles</h3>
|
<h3>Styles</h3>
|
||||||
<p>The css dependencies are as follows, note that you may change the theme with another one of your choice. If you are using a bundler such as webpack with a css loader you may import them to your main application component.</p>
|
<p>The css dependencies are as follows, note that you may change the theme with another one of your choice. If you are using a bundler such as webpack with a css loader you may import them to your main application component.</p>
|
||||||
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
primevue/resources/themes/saga-blue/theme.css //theme
|
primevue/resources/themes/saga-blue/theme.css //theme
|
||||||
primevue/resources/primevue.min.css //core css
|
primevue/resources/primevue.min.css //core css
|
||||||
primeicons/primeicons.css //icons
|
primeicons/primeicons.css //icons
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Free Themes</h5>
|
<h5>Free Themes</h5>
|
||||||
<p>PrimeVue ships with various free themes to choose from.</p>
|
<p>PrimeVue ships with various free themes to choose from.</p>
|
||||||
<pre v-code.css><code>
|
<pre v-code.css><code>
|
||||||
primevue/resources/themes/bootstrap4-light-blue/theme.css
|
primevue/resources/themes/bootstrap4-light-blue/theme.css
|
||||||
primevue/resources/themes/bootstrap4-light-purple/theme.css
|
primevue/resources/themes/bootstrap4-light-purple/theme.css
|
||||||
primevue/resources/themes/bootstrap4-dark-blue/theme.css
|
primevue/resources/themes/bootstrap4-dark-blue/theme.css
|
||||||
|
|
@ -172,18 +173,18 @@ primevue/resources/themes/rhea/theme.css
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>PrimeFlex</h5>
|
<h5>PrimeFlex</h5>
|
||||||
<p>
|
<p>
|
||||||
PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly recommended to add PrimeFlex as it is likely to need such utilities
|
PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly recommended to add PrimeFlex as it is likely to need such
|
||||||
when developing applications. View the <a href="https://www.primefaces.org/primeflex">PrimeFlex</a> homepage for the more information.
|
utilities when developing applications. View the <a href="https://www.primefaces.org/primeflex">PrimeFlex</a> homepage for the more information.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3>Nuxt Integration</h3>
|
<h3>Nuxt Integration</h3>
|
||||||
<p>Nuxt 3 is currently in beta and an official module is planned after the final release. At the moment, PrimeVue can easily be used with Nuxt 3 using a custom plugin.</p>
|
<p>Nuxt 3 is currently in beta and an official module is planned after the final release. At the moment, PrimeVue can easily be used with Nuxt 3 using a custom plugin.</p>
|
||||||
|
|
||||||
<h6>nuxt.config.js</h6>
|
<h6>nuxt.config.js</h6>
|
||||||
<p>Open the nuxt configuration file and add the css dependencies.</p>
|
<p>Open the nuxt configuration file and add the css dependencies.</p>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import { defineNuxtConfig } from 'nuxt3'
|
import { defineNuxtConfig } from 'nuxt3'
|
||||||
|
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
|
|
@ -199,10 +200,10 @@ export default defineNuxtConfig({
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>primevue.js</h6>
|
<h6>primevue.js</h6>
|
||||||
<p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
|
<p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
|
||||||
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import { defineNuxtPlugin } from "#app";
|
import { defineNuxtPlugin } from "#app";
|
||||||
import PrimeVue from "primevue/config";
|
import PrimeVue from "primevue/config";
|
||||||
import Button from "primevue/button";
|
import Button from "primevue/button";
|
||||||
|
|
@ -215,13 +216,13 @@ export default defineNuxtPlugin((nuxtApp) => {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h3>Configuration</h3>
|
<h3>Configuration</h3>
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>PrimeVue components are not wrappers and implemented natively with the Vue APIs. There are some exceptions having 3rd party dependencies such as Quill for Editor.</p>
|
<p>PrimeVue components are not wrappers and implemented natively with the Vue APIs. There are some exceptions having 3rd party dependencies such as Quill for Editor.</p>
|
||||||
<p>In addition, components require PrimeIcons library for icons.</p>
|
<p>In addition, components require PrimeIcons library for icons.</p>
|
||||||
|
|
||||||
<h6>Mandatory</h6>
|
<h6>Mandatory</h6>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
dependencies: {
|
dependencies: {
|
||||||
"vue": "^3.0.0",
|
"vue": "^3.0.0",
|
||||||
"primeicons": "^6.0.0"
|
"primeicons": "^6.0.0"
|
||||||
|
|
@ -229,36 +230,36 @@ dependencies: {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Optional</h6>
|
<h6>Optional</h6>
|
||||||
<p>Here is the list of components with 3rd party dependencies. Documentation of each component has a dependencies section as well.</p>
|
<p>Here is the list of components with 3rd party dependencies. Documentation of each component has a dependencies section as well.</p>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Component</th>
|
<th>Component</th>
|
||||||
<th>Dependency</th>
|
<th>Dependency</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Charts</td>
|
<td>Charts</td>
|
||||||
<td>Charts.js 3.3.2+</td>
|
<td>Charts.js 3.3.2+</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Editor</td>
|
<td>Editor</td>
|
||||||
<td>Quill.js 1.3.3+</td>
|
<td>Quill.js 1.3.3+</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>PrimeFlex</td>
|
<td>PrimeFlex</td>
|
||||||
<td>DataView</td>
|
<td>DataView</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Prop Cases</h5>
|
<h5>Prop Cases</h5>
|
||||||
<p>Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.</p>
|
<p>Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.</p>
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<Dialog :showHeader="false"></Dialog>
|
<Dialog :showHeader="false"></Dialog>
|
||||||
|
|
||||||
<!-- can be written as -->
|
<!-- can be written as -->
|
||||||
|
|
@ -267,9 +268,9 @@ dependencies: {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Ripple</h5>
|
<h5>Ripple</h5>
|
||||||
<p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
|
<p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import {createApp} from 'vue';
|
import {createApp} from 'vue';
|
||||||
import PrimeVue from 'primevue/config';
|
import PrimeVue from 'primevue/config';
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|
@ -278,15 +279,15 @@ app.use(PrimeVue, {ripple: true});
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>Outlined vs Filled Input Styles</h5>
|
<h5>Outlined vs Filled Input Styles</h5>
|
||||||
<p>
|
<p>
|
||||||
Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the
|
Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables
|
||||||
filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element,
|
the filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application
|
||||||
components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputStyle to 'filled'
|
element, components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set
|
||||||
at PrimeVue configuration as well.
|
inputStyle to 'filled' at PrimeVue configuration as well.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import {createApp} from 'vue';
|
import {createApp} from 'vue';
|
||||||
import PrimeVue from 'primevue/config';
|
import PrimeVue from 'primevue/config';
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|
@ -295,13 +296,13 @@ app.use(PrimeVue, {inputStyle: 'filled'});
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h5>ZIndex Layering</h5>
|
<h5>ZIndex Layering</h5>
|
||||||
<p>
|
<p>
|
||||||
ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a custom
|
ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a
|
||||||
layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeVue configuration offers the <i>zIndex</i> property to customize
|
custom layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeVue configuration offers the <i>zIndex</i> property
|
||||||
the default values for components categories. Default values are described below and can be customized when setting up PrimeVue.
|
to customize the default values for components categories. Default values are described below and can be customized when setting up PrimeVue.
|
||||||
</p>
|
</p>
|
||||||
<pre v-code.script><code>
|
<pre v-code.script><code>
|
||||||
import {createApp} from 'vue';
|
import {createApp} from 'vue';
|
||||||
import PrimeVue from 'primevue/config';
|
import PrimeVue from 'primevue/config';
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|
@ -316,79 +317,80 @@ 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 <router-link to="/locale">Locale</router-link> documentation for more information.</p>
|
||||||
|
|
||||||
<h5>Browser Support</h5>
|
<h5>Browser Support</h5>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table browsers">
|
<table class="doc-table browsers">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>
|
<th>
|
||||||
<div class="flex align-items-center">
|
<div class="flex align-items-center">
|
||||||
<img src="../../assets/images//browsers/edge.svg" alt="edge" style="width: 1.5rem" class="mr-2" />
|
<img src="../../assets/images//browsers/edge.svg" alt="edge" style="width: 1.5rem" class="mr-2" />
|
||||||
Edge
|
Edge
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<div class="flex align-items-center">
|
<div class="flex align-items-center">
|
||||||
<img src="../../assets/images/browsers/firefox.svg" alt="firefox" style="width: 1.5rem" class="mr-2" />
|
<img src="../../assets/images/browsers/firefox.svg" alt="firefox" style="width: 1.5rem" class="mr-2" />
|
||||||
Firefox
|
Firefox
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<div class="flex align-items-center">
|
<div class="flex align-items-center">
|
||||||
<img src="../../assets/images/browsers/chrome.svg" alt="chrome" style="width: 1.5rem" class="mr-2" />
|
<img src="../../assets/images/browsers/chrome.svg" alt="chrome" style="width: 1.5rem" class="mr-2" />
|
||||||
Chrome
|
Chrome
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<div class="flex align-items-center">
|
<div class="flex align-items-center">
|
||||||
<img src="../../assets/images/browsers/safari.svg" alt="safari" style="width: 1.5rem" class="mr-2" />
|
<img src="../../assets/images/browsers/safari.svg" alt="safari" style="width: 1.5rem" class="mr-2" />
|
||||||
Safari
|
Safari
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<div class="flex align-items-center">
|
<div class="flex align-items-center">
|
||||||
<img src="../../assets/images/browsers/opera.svg" alt="opera" style="width: 1.5rem" class="mr-2" />
|
<img src="../../assets/images/browsers/opera.svg" alt="opera" style="width: 1.5rem" class="mr-2" />
|
||||||
Opera
|
Opera
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Edge</td>
|
<td>Edge</td>
|
||||||
<td>Last 2 versions</td>
|
<td>Last 2 versions</td>
|
||||||
<td>Last 2 versions</td>
|
<td>Last 2 versions</td>
|
||||||
<td>Last 2 versions</td>
|
<td>Last 2 versions</td>
|
||||||
<td>Last 2 versions</td>
|
<td>Last 2 versions</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Samples</h3>
|
||||||
|
<h5>Quickstart with Create Vue</h5>
|
||||||
|
<p>An <a href="https://github.com/primefaces/primevue-quickstart-create-vue">example application</a> based on Create Vue is available at github.</p>
|
||||||
|
|
||||||
|
<h5>Quickstart with Create Vue TypeScript</h5>
|
||||||
|
<p>An <a href="https://github.com/primefaces/primevue-quickstart-create-vue-ts">sample application</a> based on Create Vue is available at github.</p>
|
||||||
|
|
||||||
|
<h5>Typescript</h5>
|
||||||
|
<p>
|
||||||
|
Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample <a href="https://github.com/primefaces/primevue-typescript-quickstart">typescript-primevue</a> application with Vue CLI
|
||||||
|
is available as at github.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h5>Quickstart with Vite</h5>
|
||||||
|
<p>A <a href="https://github.com/primefaces/primevue-quickstart-vite">starter application</a> is also provided for Vite users.</p>
|
||||||
|
|
||||||
|
<h5>Quickstart with Nuxt</h5>
|
||||||
|
<p>A <a href="https://github.com/primefaces/primevue-quickstart-nuxt3">sample application</a> is created for Nuxt 3 users.</p>
|
||||||
|
|
||||||
|
<h5>Quickstart with Vue CLI</h5>
|
||||||
|
<p>An <a href="https://github.com/primefaces/primevue-quickstart">example application</a> based on Vue CLI is available at github.</p>
|
||||||
</div>
|
</div>
|
||||||
|
</ClientOnly>
|
||||||
<h3>Samples</h3>
|
|
||||||
<h5>Quickstart with Create Vue</h5>
|
|
||||||
<p>An <a href="https://github.com/primefaces/primevue-quickstart-create-vue">example application</a> based on Create Vue is available at github.</p>
|
|
||||||
|
|
||||||
<h5>Quickstart with Create Vue TypeScript</h5>
|
|
||||||
<p>An <a href="https://github.com/primefaces/primevue-quickstart-create-vue-ts">sample application</a> based on Create Vue is available at github.</p>
|
|
||||||
|
|
||||||
<h5>Typescript</h5>
|
|
||||||
<p>
|
|
||||||
Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample <a href="https://github.com/primefaces/primevue-typescript-quickstart">typescript-primevue</a> application with Vue CLI is
|
|
||||||
available as at github.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h5>Quickstart with Vite</h5>
|
|
||||||
<p>A <a href="https://github.com/primefaces/primevue-quickstart-vite">starter application</a> is also provided for Vite users.</p>
|
|
||||||
|
|
||||||
<h5>Quickstart with Nuxt</h5>
|
|
||||||
<p>A <a href="https://github.com/primefaces/primevue-quickstart-nuxt3">sample application</a> is created for Nuxt 3 users.</p>
|
|
||||||
|
|
||||||
<h5>Quickstart with Vue CLI</h5>
|
|
||||||
<p>An <a href="https://github.com/primefaces/primevue-quickstart">example application</a> based on Vue CLI is available at github.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue