Add redirect
Cagatay Civici
parent
49b2c2cda0
commit
54ed75b7b7
|
|
@ -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>
|
||||
|
|
@ -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,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>
|
||||
|
|
@ -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,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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"redirects": [
|
||||
{
|
||||
"source": "/accessibility",
|
||||
"destination": "/guides/accessibility",
|
||||
"permanent": true
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue