Merge branch 'prod'
Cagatay Civici
commit
68a31a906a
|
|
@ -5,17 +5,21 @@
|
|||
"icon": "pi pi-home",
|
||||
"children": [
|
||||
{
|
||||
"name": "Installation",
|
||||
"to": "/installation"
|
||||
"name": "Introduction",
|
||||
"to": "/introduction"
|
||||
},
|
||||
{
|
||||
"name": "Vite Setup",
|
||||
"to": "/vite"
|
||||
},
|
||||
{
|
||||
"name": "Nuxt Setup",
|
||||
"to": "/nuxt"
|
||||
},
|
||||
{
|
||||
"name": "Configuration",
|
||||
"to": "/configuration"
|
||||
},
|
||||
{
|
||||
"name": "Nuxt",
|
||||
"to": "/nuxt"
|
||||
},
|
||||
{
|
||||
"name": "Playground",
|
||||
"to": "/playground"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mb-5">General</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/installation" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Get Started</router-link>
|
||||
<PrimeVueNuxtLink to="/introduction" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Get Started</PrimeVueNuxtLink>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://github.com/primefaces/primevue-examples" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Examples</a>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Discord</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/support" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">PRO Support</router-link>
|
||||
<PrimeVueNuxtLink to="/support" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">PRO Support</PrimeVueNuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -31,10 +31,10 @@
|
|||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/theming" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Styled Mode</router-link>
|
||||
<PrimeVueNuxtLink to="/theming" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Styled Mode</PrimeVueNuxtLink>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/unstyled" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Unstyled Mode</router-link>
|
||||
<PrimeVueNuxtLink to="/unstyled" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Unstyled Mode</PrimeVueNuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier.
|
||||
</p>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<PrimeVueNuxtLink to="/installation" class="linkbox active font-semibold py-3 px-4">
|
||||
<PrimeVueNuxtLink to="/introduction" class="linkbox active font-semibold py-3 px-4">
|
||||
<span>Get Started</span>
|
||||
<i class="pi pi-arrow-right ml-3"></i>
|
||||
</PrimeVueNuxtLink>
|
||||
|
|
@ -26,7 +26,7 @@ export default {
|
|||
return {
|
||||
home: {
|
||||
icon: 'pi pi-home',
|
||||
route: '/installation'
|
||||
route: '/introduction'
|
||||
},
|
||||
items: [{ label: 'Components' }, { label: 'Form' }, { label: 'InputText', route: '/inputtext' }],
|
||||
code: {
|
||||
|
|
@ -70,7 +70,7 @@ export default {
|
|||
return {
|
||||
home: {
|
||||
icon: 'pi pi-home',
|
||||
route: '/installation'
|
||||
route: '/introduction'
|
||||
},
|
||||
items: [
|
||||
{ label: 'Components' },
|
||||
|
|
@ -106,7 +106,7 @@ import { ref } from "vue";
|
|||
|
||||
const home = ref({
|
||||
icon: 'pi pi-home',
|
||||
route: '/installation'
|
||||
route: '/introduction'
|
||||
});
|
||||
const items = ref([
|
||||
{ label: 'Components' },
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export default {
|
|||
label: 'Programmatic',
|
||||
icon: 'pi pi-link',
|
||||
command: () => {
|
||||
this.$router.push('/installation');
|
||||
this.$router.push('/introduction');
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -125,7 +125,7 @@ export default {
|
|||
label: 'Programmatic',
|
||||
icon: 'pi pi-link',
|
||||
command: () => {
|
||||
this.$router.push('/installation');
|
||||
this.$router.push('/introduction');
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -193,7 +193,7 @@ const items = ref([
|
|||
label: 'Programmatic',
|
||||
icon: 'pi pi-link',
|
||||
command: () => {
|
||||
router.push('/installation');
|
||||
router.push('/introduction');
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p class="mb-0">We've created various samples for the popular options in the Vue ecosystem. Visit the <a href="https://github.com/primefaces/primevue-examples">primevue-examples</a> repository for more samples.</p>
|
||||
</DocSectionText>
|
||||
<div v-if="false" class="flex flex-wrap card align-items-center gap-5">
|
||||
<a href="https://github.com/primefaces/primevue-examples/tree/main/vite-quickstart" class="flex flex-column align-items-center">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/logos/vite.svg" alt="Vite" class="w-4rem h-4rem mb-3" />
|
||||
<span class="text-xl text-900">Vite</span>
|
||||
</a>
|
||||
<a href="https://github.com/primefaces/primevue-examples/tree/main/nuxt-quickstart" class="flex flex-column align-items-center">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/logos/nuxt.svg" alt="Nuxt.JS" class="w-4rem h-4rem mb-3" />
|
||||
<span class="text-xl text-900">Nuxt</span>
|
||||
</a>
|
||||
<a href="https://github.com/primefaces/primevue-examples/tree/main/astro-quickstart" class="text-800 flex flex-column align-items-center">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/logos/astro.svg" alt="Astro" class="w-4rem h-4rem mb-3" />
|
||||
<span class="text-xl text-900">Astro</span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Component prop names are described as camel case throughout the documentation however kebab-case is also fully supported. Events on the other hand should always be kebab-case.</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Dialog :showHeader="false"></Dialog>
|
||||
|
||||
<!-- can be written as -->
|
||||
|
||||
<Dialog :show-header="false"></Dialog>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Unstyled mode is disabled by default for all components. Using the PrimeVue plugin during installation, set <i>unstyled</i> as true to enable it globally. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more
|
||||
information and examples.
|
||||
</p>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import { createApp } from "vue";
|
||||
import PrimeVue from "primevue/config";
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, { unstyled: true });
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue has WCAG 2.1 AA level compliance; each component has a dedicated accessibility section to document several aspects, including keyboard and screen reader support. Through communication channels such as GitHub or Discord, numerous
|
||||
accessibility experts worldwide continue to provide constant feedback to improve the accessibility features further. View the <NuxtLink to="/guides/accessibility">accessibility guide</NuxtLink> to learn more.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue does not require financial sponsorships from its community; instead, to be backed by a solid financial foundation, optional add-ons are offered. These include a Figma UI Kit, premium application templates, and reusable UI blocks
|
||||
called PrimeBlocks. The add-ons are optional and there is no paywall when using PrimeVue.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue is a complete UI suite for Vue.js consisting of a rich set of UI components, icons, blocks, and application templates. The project's primary goal is to boost developer productivity by offering reusable solutions that are easy to
|
||||
tune and customize as an in-house library.
|
||||
</p>
|
||||
<p>
|
||||
The project has been created by <a href="https://www.primetek.com.tr" class="text-primary hover:underline font-medium">PrimeTek</a> a world-renowned vendor of popular UI Component suites, including
|
||||
<a href="https://primefaces.org" class="text-primary hover:underline font-medium">PrimeFaces</a>, <a href="https://primeng.org" class="text-primary hover:underline font-medium">PrimeNG</a>, and
|
||||
<a href="https://primevue.org" class="text-primary hover:underline font-medium">PrimeReact.</a> All the members in <NuxtLink to="/team">our team</NuxtLink> are full time employees of PrimeTek who share the same passion and vision for open
|
||||
source to create awesome UI libraries. Depending on a 3rd party library may introduce risks if the library maintainers decide not to work on the project, however, this is not the case with PrimeVue as the track record of PrimeTek shows.
|
||||
For example, PrimeFaces has been maintained actively since 2008.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PassThrough is an innovative API to provide access to the internal DOM elements to add arbitrary attributes. In general, traditional UI component libraries encapsulate UI and logic with limited APIs that makes the developers dependant on
|
||||
the library maintainer to extend this API by adding new props or events. With <NuxtLink to="/passthrough">PassThrough</NuxtLink> this limitation has been eliminated since, you'll be able to access the internal of the components to add
|
||||
events and attributes. Some common use-cases are adding test attributes, additional aria attributes, custom events and styling.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
<a href="https://github.com/orgs/primefaces/discussions" class="font-medium hover:underline text-primary">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="font-medium hover:underline text-primary">Discord</a> are the open
|
||||
environments for the community users to seek support, post topics and discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek cannot guarantee an instant response time although
|
||||
they are monitored and maintained by our staff regularly. If you need to secure our response within 1 business day in addition to other benefits, you may consider the optional <NuxtLink to="/support">PRO support</NuxtLink> service
|
||||
instead.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue can be styled in two modes; styled or unstyled. Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Unstyled mode on the other hand, leaves the styling to you while
|
||||
implementing the functionality and accessibility. Unstyled mode provides full control over the styling with no boundaries by implementing a pluggable architecture to utilize CSS libraries like Tailwind CSS, Bootstrap, Bulma or your own
|
||||
custom CSS. We've even further built the <a href="tailwind.primevue.org" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> library to skin the UI library with utility classes of Tailwind. This design is future proof as
|
||||
PrimeVue can be styled with any CSS library without actually depending on it in its core.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -71,7 +71,7 @@ export default {
|
|||
{
|
||||
label: 'Installation',
|
||||
command: () => {
|
||||
this.$router.push('/installation');
|
||||
this.$router.push('/introduction');
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -147,7 +147,7 @@ const items = ref([
|
|||
{
|
||||
label: 'Installation',
|
||||
command: () => {
|
||||
$router.push('/installation');
|
||||
$router.push('/introduction');
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export default {
|
|||
label: 'Programmatic',
|
||||
icon: 'pi pi-link',
|
||||
command: () => {
|
||||
this.$router.push('/installation');
|
||||
this.$router.push('/introduction');
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -100,7 +100,7 @@ export default {
|
|||
label: 'Programmatic',
|
||||
icon: 'pi pi-link',
|
||||
command: () => {
|
||||
this.$router.push('/installation');
|
||||
this.$router.push('/introduction');
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -150,7 +150,7 @@ const items = ref([
|
|||
label: 'Programmatic',
|
||||
icon: 'pi pi-link',
|
||||
command: () => {
|
||||
this.$router.push('/installation');
|
||||
this.$router.push('/introduction');
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export default {
|
|||
label: 'Programmatic',
|
||||
icon: 'pi pi-link',
|
||||
command: () => {
|
||||
this.$router.push('/installation');
|
||||
this.$router.push('/introduction');
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -125,7 +125,7 @@ export default {
|
|||
label: 'Programmatic',
|
||||
icon: 'pi pi-link',
|
||||
command: () => {
|
||||
this.$router.push('/installation');
|
||||
this.$router.push('/introduction');
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -194,7 +194,7 @@ const items = ref([
|
|||
label: 'Programmatic',
|
||||
icon: 'pi pi-link',
|
||||
command: () => {
|
||||
router.push('/installation');
|
||||
router.push('/introduction');
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <a href="https://www.npmjs.com/package/nuxt-primevue" target="_blank" rel="noopener noreferrer">nuxt-primevue</a> package is the official module by PrimeTek.</p>
|
||||
<p>
|
||||
PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a> along with the official
|
||||
<a href="https://www.npmjs.com/package/nuxt-primevue" target="_blank" rel="noopener noreferrer">nuxt-primevue</a> module.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
|
@ -12,12 +15,15 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
# Using npm
|
||||
npm install primevue
|
||||
npm install --save-dev nuxt-primevue
|
||||
|
||||
# Using yarn
|
||||
yarn add primevue
|
||||
yarn add --dev nuxt-primevue
|
||||
|
||||
# Using pnpm
|
||||
pnpm add primevue
|
||||
pnpm add -D nuxt-primevue
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
In <i>nuxt.config</i> file, add the <i>nuxt-primevue</i> to the modules section and define <i>primevue</i> object for the configuration of the module. View the <NuxtLink to="/nuxt/#configuration">module configuration</NuxtLink> section
|
||||
for the available list of options.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'nuxt-primevue'
|
||||
],
|
||||
primevue: {
|
||||
/* Options */
|
||||
}
|
||||
})
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The module is enabled by adding <i>nuxt-primevue</i> to the modules option. Configuration values are defined with the <i>primevue</i> property.</p>
|
||||
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<p>The complete API with the all available configuration options along with the default values.</p>
|
||||
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'nuxt-primevue'
|
||||
],
|
||||
primevue: {
|
||||
/* Options */
|
||||
}
|
||||
})
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'nuxt-primevue'
|
||||
],
|
||||
primevue: {
|
||||
usePrimeVue: true,
|
||||
options: {},
|
||||
importPT: undefined,
|
||||
cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities',
|
||||
components: {
|
||||
prefix: '',
|
||||
name: undefined,
|
||||
include: undefined,
|
||||
exclude: undefined
|
||||
},
|
||||
directives: {
|
||||
prefix: '',
|
||||
name: undefined,
|
||||
include: undefined,
|
||||
exclude: undefined
|
||||
},
|
||||
composables: {
|
||||
prefix: '',
|
||||
name: undefined,
|
||||
include: undefined,
|
||||
exclude: undefined
|
||||
}
|
||||
}
|
||||
})
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the
|
||||
<NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
|
||||
</p>
|
||||
<p>You may use the <i>app.vue</i> file to import a theme using a script.</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<p>The style section may also be used with <i>@import</i>.</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<p>Another alternative would be the <i>css</i> option in <i>nuxt.config</i>.</p>
|
||||
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>
|
||||
The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
|
||||
Normalize, or similar, a custom CSS layer configuration might be necessary with the <i>cssLayerOrder</i> option to make sure primevue layer is defined afterward. This only applies to Styled Mode as Unstyled Mode does not use any default
|
||||
styles or layers. View the <NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> guide for more information.
|
||||
</p>
|
||||
<DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code5" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
<script>
|
||||
import 'primevue/resources/themes/lara-light-green/theme.csss'
|
||||
<\/script>
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
<style>
|
||||
@import url("primevue/resources/themes/lara-light-green/theme.css");
|
||||
<\/style>
|
||||
`
|
||||
},
|
||||
code3: {
|
||||
basic: `
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'nuxt-primevue'
|
||||
],
|
||||
primevue: {
|
||||
/* Options */
|
||||
},
|
||||
css: ['primevue/resources/themes/lara-light-green/theme.css']
|
||||
})
|
||||
`
|
||||
},
|
||||
code4: {
|
||||
basic: `
|
||||
/* Reset CSS */
|
||||
@layer reset {
|
||||
button,
|
||||
input {
|
||||
/* CSS to Reset */
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code5: {
|
||||
basic: `
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'nuxt-primevue'
|
||||
],
|
||||
primevue: {
|
||||
cssLayerOrder: 'reset,primevue'
|
||||
},
|
||||
css: ['primevue/resources/themes/lara-light-green/theme.css']
|
||||
})
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Unstyled mode is disabled by default for all components. Set <i>unstyled</i> as true to enable it globally using a module configuration. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more information and
|
||||
examples.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>In unstyled mode, you'd need to style the components on your end. If you are using Tailwind CSS, see the <a href="https://tailwind.primevue.org/nuxt/">Tailwind CSS Presets</a> project to get you started.</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'nuxt-primevue'
|
||||
],
|
||||
primevue: {
|
||||
unstyled: true
|
||||
}
|
||||
})
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
import path from 'path';
|
||||
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'nuxt-primevue'
|
||||
],
|
||||
primevue: {
|
||||
unstyled: true,
|
||||
importPT: { from: path.resolve(__dirname, './presets/lara/') } //import and apply preset
|
||||
}
|
||||
})
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The nuxt-primevue module registers the components automatically so you may start using them instantly. See the <NuxtLink to="/nuxt/#components">Components</NuxtLink> section to customize how the components are loaded and named.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Check" icon="pi pi-check" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button label="Check" icon="pi pi-check" />
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -47,7 +47,7 @@ export default {
|
|||
label: 'Programmatic',
|
||||
icon: 'pi pi-link',
|
||||
command: () => {
|
||||
this.$router.push('/installation');
|
||||
this.$router.push('/introduction');
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -131,7 +131,7 @@ export default {
|
|||
label: 'Programmatic',
|
||||
icon: 'pi pi-link',
|
||||
command: () => {
|
||||
this.$router.push('/installation');
|
||||
this.$router.push('/introduction');
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -204,7 +204,7 @@ const items = ref([
|
|||
label: 'Programmatic',
|
||||
icon: 'pi pi-link',
|
||||
command: () => {
|
||||
router.push('/installation');
|
||||
router.push('/introduction');
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export default {
|
|||
label: 'Programmatic',
|
||||
icon: 'pi pi-link',
|
||||
command: () => {
|
||||
this.$router.push('/installation');
|
||||
this.$router.push('/introduction');
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -125,7 +125,7 @@ export default {
|
|||
label: 'Programmatic',
|
||||
icon: 'pi pi-link',
|
||||
command: () => {
|
||||
this.$router.push('/installation');
|
||||
this.$router.push('/introduction');
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -194,7 +194,7 @@ const items = ref([
|
|||
label: 'Programmatic',
|
||||
icon: 'pi pi-link',
|
||||
command: () => {
|
||||
router.push('/installation');
|
||||
router.push('/introduction');
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p class="mb-0">
|
||||
We've created various samples for the popular options in the Vue ecosystem. Visit the <a href="https://github.com/primefaces/primevue-examples">primevue-examples</a> repository for more samples including
|
||||
<a href="https://github.com/primefaces/primevue-examples/tree/main/vite-quickstart" target="_blank" rel="noopener noreferrer">vite-quickstart</a> and
|
||||
<a href="https://github.com/primefaces/primevue-examples/tree/main/vite-ts-quickstart" target="_blank" rel="noopener noreferrer">vite-ts-quickstart</a>.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue plugin is required to be installed with the <i>use</i> function to set up the default <NuxtLink to="/theming">configuration</NuxtLink>. If you are using <NuxtLink to="https://nuxt.com/">Nuxt</NuxtLink>, this step is not required
|
||||
as our nuxt module handles it.
|
||||
PrimeVue plugin is required to be installed as an application plugin to set up the default <NuxtLink to="/configuration">configuration</NuxtLink>. The plugin is lightweight, only sets up the configuration object without affecting your
|
||||
application.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
|
|
@ -6,9 +6,9 @@
|
|||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>
|
||||
The classes of PrimeVue is defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap, Normalize
|
||||
or similar a custom CSS layer configuration might be necessary. Note that this only applies to Styled Mode as Unstyled Mode does not use any default styles or layers. Here is an example with Tailwind, visit the
|
||||
<NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> for more information.
|
||||
The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
|
||||
Normalize, or similar, a custom CSS layer configuration might be necessary. This only applies to Styled Mode as Unstyled Mode does not use any default styles or layers. View the <NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> guide
|
||||
for more information.
|
||||
</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
|
|
@ -19,7 +19,10 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: "\nimport 'primevue/resources/themes/lara-light-green/theme.css'\n"
|
||||
basic: `
|
||||
//in main.js
|
||||
import 'primevue/resources/themes/lara-light-green/theme.css'
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Unstyled mode is disabled by default for all components. Using the PrimeVue plugin during installation, set <i>unstyled</i> as true to enable it globally. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more
|
||||
information and examples.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>In unstyled mode, you'd need to style the components on your end. If you are using Tailwind CSS, see the <a href="https://tailwind.primevue.org/vite/">Tailwind CSS Presets</a> project to get you started.</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
import { createApp } from "vue";
|
||||
import PrimeVue from "primevue/config";
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, {
|
||||
unstyled: true
|
||||
});
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
import { createApp } from 'vue';
|
||||
import PrimeVue from 'primevue/config';
|
||||
import Lara from '@/presets/lara'; //import preset
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(PrimeVue, {
|
||||
unstyled: true,
|
||||
pt: Lara //apply preset
|
||||
});
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.</p>
|
||||
<p>Each component can be imported and registered individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Check" icon="pi pi-check" />
|
||||
|
|
@ -17,6 +17,10 @@ export default defineNuxtConfig({
|
|||
nitro: {
|
||||
alias: aliasConfig.resolve.alias
|
||||
},
|
||||
routeRules: {
|
||||
'/accessibility': { redirect: { to: '/guides/accessibility', statusCode: 301 } },
|
||||
'/installation': { redirect: { to: '/vite', statusCode: 301 } }
|
||||
},
|
||||
primevue: {
|
||||
options: {
|
||||
ripple: true
|
||||
|
|
|
|||
|
|
@ -13,16 +13,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BlockSection from '@/components/landing/BlockSection.vue';
|
||||
import FeaturesSection from '@/components/landing/FeaturesSection.vue';
|
||||
import FooterSection from '@/components/landing/FooterSection.vue';
|
||||
import HeroSection from '@/components/landing/HeroSection.vue';
|
||||
import TemplateSection from '@/components/landing/TemplateSection.vue';
|
||||
import ThemeSection from '@/components/landing/ThemeSection.vue';
|
||||
import UsersSection from '@/components/landing/UsersSection.vue';
|
||||
import EventBus from '@/layouts/AppEventBus';
|
||||
import AppNews from '@/layouts/AppNews';
|
||||
import AppTopBar from '@/layouts/AppTopBar.vue';
|
||||
import BlockSection from './landing/BlockSection.vue';
|
||||
import FeaturesSection from './landing/FeaturesSection.vue';
|
||||
import FooterSection from './landing/FooterSection.vue';
|
||||
import HeroSection from './landing/HeroSection.vue';
|
||||
import TemplateSection from './landing/TemplateSection.vue';
|
||||
import ThemeSection from './landing/ThemeSection.vue';
|
||||
import UsersSection from './landing/UsersSection.vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<Head>
|
||||
<Title>Introduction - PrimeVue</Title>
|
||||
<Meta name="description" content="Next-generation UI Component suite for Vue." />
|
||||
</Head>
|
||||
<div class="doc">
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Introduction</h1>
|
||||
<p>Next-generation UI Component suite for Vue.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AccessibilityDoc from '@/doc/introduction/AccessibilityDoc.vue';
|
||||
import AddOnsDoc from '@/doc/introduction/AddOnsDoc.vue';
|
||||
import OverviewDoc from '@/doc/introduction/OverviewDoc.vue';
|
||||
import PassThroughDoc from '@/doc/introduction/PassThroughDoc.vue';
|
||||
import SupportDoc from '@/doc/introduction/SupportDoc.vue';
|
||||
import ThemingDoc from '@/doc/introduction/ThemingDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'overview',
|
||||
label: 'Overview',
|
||||
component: OverviewDoc
|
||||
},
|
||||
{
|
||||
id: 'theming',
|
||||
label: 'Theming',
|
||||
component: ThemingDoc
|
||||
},
|
||||
{
|
||||
id: 'passthrough',
|
||||
label: 'PassThrough',
|
||||
component: PassThroughDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
},
|
||||
{
|
||||
id: 'add-ons',
|
||||
label: 'Add-Ons',
|
||||
component: AddOnsDoc
|
||||
},
|
||||
{
|
||||
id: 'support',
|
||||
label: 'Support',
|
||||
component: SupportDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<template>
|
||||
<section class="landing-getstarted flex flex-column align-items-center justify-content-center mt-8 z-1">
|
||||
<div class="flex flex-column md:flex-row align-items-center justify-content-center">
|
||||
<PrimeVueNuxtLink to="/installation" class="linkbox active font-semibold py-3 px-4 fadeinleft animation-duration-2000 animation-ease-out"> Get Started <i class="pi pi-arrow-right ml-3"></i> </PrimeVueNuxtLink>
|
||||
<div class="relative cursor-pointer box download-box w-15rem font-medium p-3 px-4 mt-3 md:mt-0 md:ml-3 bg-transparent inline-flex align-items-center fadeinright animation-duration-2000 animation-ease-out" @click="copyClick">
|
||||
<i :class="downloadIcon"></i>
|
||||
<span class="font-bold select-all" style="font-family: monaco, monospace"> {{ npmText }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
npmText: 'npm i primevue',
|
||||
downloadIcon: 'pi pi-download mr-3 download-icon'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
copyClick() {
|
||||
navigator.clipboard.writeText(this.npmText);
|
||||
this.npmText = 'copied!';
|
||||
this.downloadIcon = 'pi pi-copy mr-3 download-icon';
|
||||
setTimeout(() => {
|
||||
this.npmText = 'npm i primevue';
|
||||
this.downloadIcon = 'pi pi-download mr-3 download-icon';
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,15 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<Head>
|
||||
<Title>Nuxt Module - PrimeVue</Title>
|
||||
<Meta name="description" content="PrimeVue has seamless integration with Nuxt using an exclusive module." />
|
||||
<Title>Install PrimeVue with Nuxt</Title>
|
||||
<Meta name="description" content="Setting up PrimeVue in a Nuxt project" />
|
||||
</Head>
|
||||
|
||||
<div class="doc">
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Nuxt</h1>
|
||||
<p>PrimeVue has seamless integration with Nuxt using the official module.</p>
|
||||
<h1>Install PrimeVue with Nuxt</h1>
|
||||
<p>Setting up PrimeVue in a Nuxt project.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
|
|
@ -20,9 +19,12 @@
|
|||
|
||||
<script>
|
||||
import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
|
||||
import ExampleDoc from '@/doc/nuxt/ExampleDoc.vue';
|
||||
import SetupDoc from '@/doc/nuxt/SetupDoc.vue';
|
||||
import StyleDoc from '@/doc/nuxt/StyleDoc.vue';
|
||||
import ExamplesDoc from '@/doc/nuxt/ExamplesDoc.vue';
|
||||
import ModuleSetupDoc from '@/doc/nuxt/ModuleSetupDoc.vue';
|
||||
import StyledModeDoc from '@/doc/nuxt/StyledModeDoc.vue';
|
||||
import UnstyledModeDoc from '@/doc/nuxt/UnstyledModeDoc.vue';
|
||||
import UsageDoc from '@/doc/nuxt/UsageDoc.vue';
|
||||
import VideoDoc from '@/doc/nuxt/VideoDoc.vue';
|
||||
import CSSLayerOrderDoc from '@/doc/nuxt/configuration/CSSLayerOrderDoc.vue';
|
||||
import ComponentsDoc from '@/doc/nuxt/configuration/ComponentsDoc.vue';
|
||||
import ComposablesDoc from '@/doc/nuxt/configuration/ComposablesDoc.vue';
|
||||
|
|
@ -30,7 +32,6 @@ import DirectivesDoc from '@/doc/nuxt/configuration/DirectivesDoc.vue';
|
|||
import ImportPTDoc from '@/doc/nuxt/configuration/ImportPTDoc.vue';
|
||||
import OptionsDoc from '@/doc/nuxt/configuration/OptionsDoc.vue';
|
||||
import UsePrimeVueDoc from '@/doc/nuxt/configuration/UsePrimeVueDoc.vue';
|
||||
import VideoDoc from '../../doc/nuxt/VideoDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -42,13 +43,35 @@ export default {
|
|||
component: DownloadDoc
|
||||
},
|
||||
{
|
||||
id: 'setup',
|
||||
label: 'Setup',
|
||||
component: SetupDoc
|
||||
id: 'module-setup',
|
||||
label: 'Module Setup',
|
||||
component: ModuleSetupDoc
|
||||
},
|
||||
{
|
||||
id: 'theming',
|
||||
label: 'Theming',
|
||||
description: 'PrimeVue has two theming modes; styled or unstyled.',
|
||||
children: [
|
||||
{
|
||||
id: 'styled',
|
||||
label: 'Styled Mode',
|
||||
component: StyledModeDoc
|
||||
},
|
||||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled Mode',
|
||||
component: UnstyledModeDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'usage',
|
||||
label: 'Usage',
|
||||
component: UsageDoc
|
||||
},
|
||||
{
|
||||
id: 'configuration',
|
||||
label: 'Configuration',
|
||||
label: 'Module Configuration',
|
||||
children: [
|
||||
{
|
||||
id: 'useprimevue',
|
||||
|
|
@ -88,14 +111,9 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
id: 'styles',
|
||||
label: 'Styles',
|
||||
component: StyleDoc
|
||||
},
|
||||
{
|
||||
id: 'example',
|
||||
label: 'Example',
|
||||
component: ExampleDoc
|
||||
id: 'examples',
|
||||
label: 'Examples',
|
||||
component: ExamplesDoc
|
||||
},
|
||||
{
|
||||
id: 'video',
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<Head>
|
||||
<Title>Getting Started - PrimeVue</Title>
|
||||
<Meta name="description" content="PrimeVue is a rich set of open source components for Vue." />
|
||||
<Title>Install PrimeVue with Vite</Title>
|
||||
<Meta name="description" content="Setting up PrimeVue in a Vite project" />
|
||||
</Head>
|
||||
<div class="doc">
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Installation</h1>
|
||||
<p>PrimeVue is a rich set of open source UI components for Vue.</p>
|
||||
<h1>Install PrimeVue with Vite</h1>
|
||||
<p>Setting up PrimeVue in a Vite project.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
|
|
@ -16,14 +16,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import DownloadDoc from '@/doc/installation/DownloadDoc.vue';
|
||||
import ExamplesDoc from '@/doc/installation/ExamplesDoc.vue';
|
||||
import PluginDoc from '@/doc/installation/PluginDoc.vue';
|
||||
import PropCasesDoc from '@/doc/installation/PropCasesDoc.vue';
|
||||
import StyledModeDoc from '@/doc/installation/StyledModeDoc.vue';
|
||||
import UnstyledModeDoc from '@/doc/installation/UnstyledModeDoc.vue';
|
||||
import UsageDoc from '@/doc/installation/UsageDoc.vue';
|
||||
import CreateVueDoc from '@/doc/installation/videos/CreateVueDoc.vue';
|
||||
import DownloadDoc from '@/doc/vite/DownloadDoc.vue';
|
||||
import ExamplesDoc from '@/doc/vite/ExamplesDoc.vue';
|
||||
import PluginDoc from '@/doc/vite/PluginDoc.vue';
|
||||
import StyledModeDoc from '@/doc/vite/StyledModeDoc.vue';
|
||||
import UnstyledModeDoc from '@/doc/vite/UnstyledModeDoc.vue';
|
||||
import UsageDoc from '@/doc/vite/UsageDoc.vue';
|
||||
import CreateVueDoc from '@/doc/vite/videos/CreateVueDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -39,11 +38,6 @@ export default {
|
|||
label: 'Plugin',
|
||||
component: PluginDoc
|
||||
},
|
||||
{
|
||||
id: 'usage',
|
||||
label: 'Usage',
|
||||
component: UsageDoc
|
||||
},
|
||||
{
|
||||
id: 'theming',
|
||||
label: 'Theming',
|
||||
|
|
@ -62,9 +56,9 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
id: 'propcases',
|
||||
label: 'Prop Cases',
|
||||
component: PropCasesDoc
|
||||
id: 'usage',
|
||||
label: 'Usage',
|
||||
component: UsageDoc
|
||||
},
|
||||
{
|
||||
id: 'examples',
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"redirects": [
|
||||
{
|
||||
"source": "/accessibility",
|
||||
"destination": "/guides/accessibility",
|
||||
"permanent": true
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue