Add redirect

pull/5002/head
Cagatay Civici 2023-12-27 00:29:20 +03:00
parent 49b2c2cda0
commit 54ed75b7b7
11 changed files with 4 additions and 315 deletions

View File

@ -1,27 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a>.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
# Using npm
npm install primevue
# Using yarn
yarn add primevue
# Using pnpm
pnpm add primevue
`
}
};
}
};
</script>

View File

@ -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>

View File

@ -1,27 +0,0 @@
<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.
</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue);
`
}
};
}
};
</script>

View File

@ -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>

View File

@ -1,41 +0,0 @@
<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>
<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.
</p>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: "\nimport 'primevue/resources/themes/lara-light-green/theme.css'\n"
},
code2: {
basic: `
/* Order */
@layer reset, primevue;
/* Reset CSS */
@layer reset {
button,
input {
/* CSS to Reset */
}
}
`
}
};
}
};
</script>

View File

@ -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>

View File

@ -1,46 +0,0 @@
<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>
</DocSectionText>
<div class="card flex justify-content-center">
<Button label="Check" icon="pi pi-check" />
</div>
<DocSectionCode :code="code" importCode />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
import Button from "primevue/button"
const app = createApp(App);
app.component('Button', Button);
`,
options: `
<template>
<div class="card flex justify-content-center">
<Button label="Check" icon="pi pi-check" />
</div>
</template>
<script>
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Button label="Check" icon="pi pi-check" />
</div>
</template>
<script setup>
<\/script>
`
}
};
}
};
</script>

View File

@ -1,11 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
<a alt="Create Vue App" href="https://github.com/vuejs/create-vue">Create-Vue</a>
is the recommended way to start a Vite-powered Vue project.
</p>
</DocSectionText>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/FjYesOz95MM" frameborder="0" allowfullscreen></iframe>
</div>
</template>

View File

@ -17,6 +17,10 @@ export default defineNuxtConfig({
nitro: { nitro: {
alias: aliasConfig.resolve.alias alias: aliasConfig.resolve.alias
}, },
routeRules: {
'/accessibility': { redirect: { to: '/guides/accessibility', statusCode: 301 } },
'/installation': { redirect: { to: '/vite', statusCode: 301 } }
},
primevue: { primevue: {
options: { options: {
ripple: true ripple: true

View File

@ -1,83 +0,0 @@
<template>
<Head>
<Title>Getting Started - PrimeVue</Title>
<Meta name="description" content="PrimeVue is a rich set of open source components for Vue." />
</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>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</div>
</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';
export default {
data() {
return {
docs: [
{
id: 'download',
label: 'Download',
component: DownloadDoc
},
{
id: 'plugin',
label: 'Plugin',
component: PluginDoc
},
{
id: 'usage',
label: 'Usage',
component: UsageDoc
},
{
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: 'propcases',
label: 'Prop Cases',
component: PropCasesDoc
},
{
id: 'examples',
label: 'Examples',
component: ExamplesDoc
},
{
id: 'videos',
label: 'Video Tutorial',
component: CreateVueDoc
}
]
};
}
};
</script>

View File

@ -1,9 +0,0 @@
{
"redirects": [
{
"source": "/accessibility",
"destination": "/guides/accessibility",
"permanent": true
}
]
}