vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update vite doc

pull/5806/head
mertsincan 2024-05-27 00:33:38 +03:00
parent faaed7a0a9
commit f8437d1481
4 changed files with 4 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
doc/vite/DownloadDoc.vue
View File

@ -12,13 +12,13 @@ export default {
code: {
basic: `
# Using npm
npm install primevue@4.0.0-beta.3
npm install primevue
# Using yarn
yarn add primevue@4.0.0-beta.3
yarn add primevue
# Using pnpm
pnpm add primevue@4.0.0-beta.3
pnpm add primevue
`
}
};

24
doc/vite/StyledModeDoc.vue
View File

@ -1,24 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Styled mode provides pre-skinned components, default theme is Aura with emerald as the primary color. See the <NuxtLink to="/theming/styled">styled mode</NuxtLink> documentation to for customization.</p>
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code: {
basic: `
import { createApp } from 'vue';
import PrimeVueStyled from 'primevue/styled';
const app = createApp(App);
app.use(PrimeVueStyled);
`
}
};
}
};
</script>

38
doc/vite/UnstyledModeDoc.vue
View File

@ -1,38 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>In unstyled mode, the components do not include any CSS so you'd need to style the components on your end. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more information and examples.</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
<p>If you are using Tailwind CSS, visit the <a href="https://tailwind.primevue.org/vite/">Tailwind CSS Presets</a> project to get you started with styling the components with Tailwind utility classes.</p>
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
import { createApp } from "vue";
import PrimeVueUnstyled from "primevue/config";
const app = createApp(App);
app.use(PrimeVueUnstyled);
`
},
code2: {
basic: `
import { createApp } from 'vue';
import PrimeVueUnstyled from 'primevue/config';
import Lara from '@/presets/lara'; //import preset
const app = createApp(App);
app.use(PrimeVueUnstyled, {
pt: Lara //apply preset
});
`
}
};
}
};
</script>

18
pages/vite/index.vue
View File

@ -19,8 +19,6 @@
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';
export default {
@ -35,21 +33,7 @@ export default {
{
id: 'plugin',
label: 'Plugin',
component: PluginDoc,
description: `PrimeVue plugin is required to be installed as an application plugin to set up the default configuration. The plugin is lightweight, only sets up the configuration object without affecting your application. PrimeVue has two styling modes; Styled and Unstyled. If you are
just getting started, we suggest to using the styled mode.`,
children: [
{
id: 'styled',
label: 'Styled Mode',
component: StyledModeDoc
},
{
id: 'unstyled',
label: 'Unstyled Mode',
component: UnstyledModeDoc
}
]
component: PluginDoc
},
{
id: 'usage',