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

Updated getting started docs

pull/6674/head
Cagatay Civici 2024-10-27 13:54:37 +03:00
parent bee6a7f0f1
commit 2d6b48bfd9
18 changed files with 146 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/showcase/assets/menu/menu.json
View File

@ -586,11 +586,6 @@
}
]
},
{
"name": "Contribution",
"to": "/contribution",
"icon": "pi pi-users"
},
{
"name": "Discover",
"icon": "pi pi-search",
@ -611,6 +606,11 @@
"name": "Changelog",
"href": "https://github.com/primefaces/primevue/blob/master/CHANGELOG.md"
},
{
"name": "Contribution",
"to": "/contribution",
"icon": "pi pi-users"
},
{
"name": "Store",
"href": "https://www.primefaces.org/store/"

8
apps/showcase/doc/nuxt/DownloadDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<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/@primevue/nuxt-module" target="_blank" rel="noopener noreferrer">nuxt-primevue</a> module.
<a href="https://www.npmjs.com/package/@primevue/nuxt-module" target="_blank" rel="noopener noreferrer">@primevue/nuxt-module</a>.
</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
@ -15,15 +15,15 @@ export default {
code: {
basic: `
# Using npm
npm install primevue
npm install primevue @primevue/themes
npm install --save-dev @primevue/nuxt-module
# Using yarn
yarn add primevue
yarn add primevue @primevue/themes
yarn add --dev @primevue/nuxt-module
# Using pnpm
pnpm add primevue
pnpm add primevue @primevue/themes
pnpm add -D @primevue/nuxt-module
`
}

0
apps/showcase/doc/nuxt/SetupDoc.vue → apps/showcase/doc/nuxt/ModuleDoc.vue
View File

11
apps/showcase/doc/nuxt/NextStepsDoc.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Welcome to the Prime UI Ecosystem! Once you have PrimeVue up and running, we recommend exploring the following resources to gain a deeper understanding of the library.</p>
<ul class="leading-relaxed">
<li><NuxtLink to="/configuration" class="doc-link">Global configuration</NuxtLink></li>
<li><NuxtLink to="/theming/styled" class="doc-link">Customization of styles</NuxtLink></li>
<li><NuxtLink to="/passthrough" class="doc-link">Pass through attributes</NuxtLink></li>
<li><NuxtLink to="/support" class="doc-link">Getting support</NuxtLink></li>
</ul>
</DocSectionText>
</template>

29
apps/showcase/doc/nuxt/StyleDoc.vue
View File

@ -1,29 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Module is used to configure the PrimeVue options, register components, directives and composables. CSS configuration of the styled mode is not included at the moment due to the upcoming enhancements like moving theming to core with CSS
variables. In styled mode, the theme can be defined at Nuxt configuration with the <i>css</i> property. Note that this only applies to styled mode, in unstyled mode a theme file is not required as styling is done externally.
</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
<p>
Until the new styled mode implementation is ready, dynamic theming at runtime is currently done by switching theme css files. Visit the <NuxtLink to="/theming/#switchthemes">Switch Themes</NuxtLink>
section at styled mode for an example.
</p>
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
export default defineNuxtConfig({
css: ['primevue/resources/themes/aura-dark-green/theme.css']
})
`
}
};
}
};
</script>

33
apps/showcase/doc/nuxt/ThemeDoc.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Configure the module to use a theme like Aura.</p>
<DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code: {
basic: `
import Aura from '@primevue/themes/aura';
export default defineNuxtConfig({
modules: [
'@primevue/nuxt-module'
],
primevue: {
options: {
theme: {
preset: Aura
}
}
}
})
`
}
};
}
};
</script>

6
apps/showcase/doc/nuxt/UsageDoc.vue → apps/showcase/doc/nuxt/VerifyDoc.vue
View File

@ -1,9 +1,9 @@
<template>
<DocSectionText v-bind="$attrs">
<p>The nuxt-primevue module registers the components automatically so you may start using them instantly.</p>
<p>The nuxt-primevue module registers the components automatically with tree-shaking support so you may start using them instantly.</p>
</DocSectionText>
<div class="card flex justify-center">
<Button label="Check" icon="pi pi-check" />
<Button label="Verify" />
</div>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template>
@ -14,7 +14,7 @@ export default {
return {
code: {
basic: `
<Button label="Check" icon="pi pi-check" />
<Button label="Verify" />
`
}
};

2
apps/showcase/doc/nuxt/configuration/UsePrimeVueDoc.vue
View File

@ -12,7 +12,7 @@ export default {
code: {
basic: `
primevue: {
usePrimeVue: true
usePrimeVue: true | false
}
`
}

4
apps/showcase/doc/passthrough/IntroductionDoc.vue
View File

@ -6,8 +6,8 @@
</p>
<p>
Vision of PrimeTek is <i>Your components, not ours</i>. The pass through feature is a key element to implement this vision by exposing the component internals in order to apply arbitrary attributes and listeners to the DOM elements. The
main advantage of this approach is that it prevents you from being locked into the component author. We recommend considering the pass-through feature whenever you need to tailor a component that lacks a built-in feature for your specific
requirement.
primary advantage of this approach is that it frees you from being restricted by the main component API. We recommend considering the pass-through feature whenever you need to tailor a component that lacks a built-in feature for your
specific requirement.
</p>
<p>Two videos are available at PrimeTV youtube channel, first one is an introduction and second one covers a unique case that is solved by the pass-through.</p>
</DocSectionText>

6
apps/showcase/doc/vite/DownloadDoc.vue
View File

@ -12,13 +12,13 @@ export default {
code: {
basic: `
# Using npm
npm install primevue
npm install primevue @primevue/themes
# Using yarn
yarn add primevue
yarn add primevue @primevue/themes
# Using pnpm
pnpm add primevue
pnpm add primevue @primevue/themes
`
}
};

12
apps/showcase/doc/vite/NextStepsDoc.vue Normal file
View File

@ -0,0 +1,12 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Welcome to the Prime UI Ecosystem! Once you have PrimeVue up and running, we recommend exploring the following resources to gain a deeper understanding of the library.</p>
<ul class="leading-relaxed">
<li><NuxtLink to="/configuration" class="doc-link">Global configuration</NuxtLink></li>
<li><NuxtLink to="/autoimport" class="doc-link">Auto imports with tree-shaking</NuxtLink></li>
<li><NuxtLink to="/theming/styled" class="doc-link">Customization of styles</NuxtLink></li>
<li><NuxtLink to="/passthrough" class="doc-link">Pass through attributes</NuxtLink></li>
<li><NuxtLink to="/support" class="doc-link">Getting support</NuxtLink></li>
</ul>
</DocSectionText>
</template>

5
apps/showcase/doc/vite/PluginDoc.vue
View File

@ -1,9 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
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>
<p>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, and only utilized for configuration purposes.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>

44
apps/showcase/doc/vite/StyledModeDoc.vue
View File

@ -1,44 +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 for details.</p>
<p>Install the <i>@primevue/themes</i> add-on package as the themes are not included in PrimeVue by default.</p>
<DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
<p>Configure PrimeVue to use a theme like Aura.</p>
<DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
# Using npm
npm install @primevue/themes
# Using yarn
yarn add @primevue/themes
# Using pnpm
pnpm add @primevue/themes
`
},
code2: {
basic: `
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';
const app = createApp(App);
app.use(PrimeVue, {
theme: {
preset: Aura
}
});
`
}
};
}
};
</script>

29
apps/showcase/doc/vite/ThemeDoc.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Configure PrimeVue to use a theme like Aura.</p>
<DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code: {
basic: `
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';
const app = createApp(App);
app.use(PrimeVue, {
theme: {
preset: Aura
}
});
`
}
};
}
};
</script>

29
apps/showcase/doc/vite/UnstyledModeDoc.vue
View File

@ -1,29 +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, this is especially useful when building your own UI library on top of PrimeVue. Visit the
<NuxtLink to="/theming/unstyled">Unstyled mode</NuxtLink> documentation for more information and examples.
</p>
<DocSectionCode :code="code1" hideToggleCode importCode 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
});
`
}
};
}
};
</script>

11
apps/showcase/doc/vite/UsageDoc.vue → apps/showcase/doc/vite/VerifyDoc.vue
View File

@ -1,13 +1,12 @@
<template>
<DocSectionText v-bind="$attrs">
<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. If you prefer importing components automatically with
tree-shaking support , view the
<NuxtLink to="/autoimport">autoimport</NuxtLink> guide.
Verify your setup by adding a component such as <NuxtLink to="/button">Button</NuxtLink>. Each component can be imported and registered individually so that you only include what you use for bundle optimizization. Import path is available
in the documentation of the corresponding component.
</p>
</DocSectionText>
<div class="card flex justify-center">
<Button label="Check" icon="pi pi-check" />
<Button label="Verify" />
</div>
<DocSectionCode :code="code" importCode />
</template>
@ -26,7 +25,7 @@ app.component('Button', Button);
options: `
<template>
<div class="card flex justify-center">
<Button label="Check" icon="pi pi-check" />
<Button label="Verify" />
</div>
</template>
@ -36,7 +35,7 @@ app.component('Button', Button);
composition: `
<template>
<div class="card flex justify-center">
<Button label="Check" icon="pi pi-check" />
<Button label="Verify" />
</div>
</template>

43
apps/showcase/pages/nuxt/index.vue
View File

@ -21,10 +21,10 @@
import AutoImportDoc from '@/doc/nuxt/AutoImportDoc.vue';
import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
import ExamplesDoc from '@/doc/nuxt/ExamplesDoc.vue';
import SetupDoc from '@/doc/nuxt/SetupDoc.vue';
import StyledModeDoc from '@/doc/nuxt/StyledModeDoc.vue';
import UnstyledModeDoc from '@/doc/nuxt/UnstyledModeDoc.vue';
import UsageDoc from '@/doc/nuxt/UsageDoc.vue';
import ModuleDoc from '@/doc/nuxt/ModuleDoc.vue';
import NextStepsDoc from '@/doc/nuxt/NextStepsDoc.vue';
import ThemeDoc from '@/doc/nuxt/ThemeDoc.vue';
import VerifyDoc from '@/doc/nuxt/VerifyDoc.vue';
import ComponentsDoc from '@/doc/nuxt/configuration/ComponentsDoc.vue';
import ComposablesDoc from '@/doc/nuxt/configuration/ComposablesDoc.vue';
import DirectivesDoc from '@/doc/nuxt/configuration/DirectivesDoc.vue';
@ -43,31 +43,19 @@ export default {
component: DownloadDoc
},
{
id: 'setup',
label: 'Setup',
component: SetupDoc
id: 'module',
label: 'Module',
component: ModuleDoc
},
{
id: 'theming',
label: 'Theming',
description: 'PrimeVue has two styling modes; Styled and Unstyled. If you are just getting started, begin with the styled mode.',
children: [
{
id: 'styled',
label: 'Styled Mode',
component: StyledModeDoc
},
{
id: 'unstyled',
label: 'Unstyled Mode',
component: UnstyledModeDoc
}
]
id: 'theme',
label: 'Theme',
component: ThemeDoc
},
{
id: 'usage',
label: 'Usage',
component: UsageDoc
id: 'verify',
label: 'Verify',
component: VerifyDoc
},
{
id: 'configuration',
@ -119,6 +107,11 @@ export default {
id: 'examples',
label: 'Examples',
component: ExamplesDoc
},
{
id: 'nextsteps',
label: 'Next Steps',
component: NextStepsDoc
}
]
};

40
apps/showcase/pages/vite/index.vue
View File

@ -18,9 +18,10 @@
<script>
import DownloadDoc from '@/doc/vite/DownloadDoc.vue';
import ExamplesDoc from '@/doc/vite/ExamplesDoc.vue';
import StyledModeDoc from '@/doc/vite/StyledModeDoc.vue';
import UnstyledModeDoc from '@/doc/vite/UnstyledModeDoc.vue';
import UsageDoc from '@/doc/vite/UsageDoc.vue';
import NextStepsDoc from '@/doc/vite/NextStepsDoc.vue';
import PluginDoc from '@/doc/vite/PluginDoc.vue';
import ThemeDoc from '@/doc/vite/ThemeDoc.vue';
import VerifyDoc from '@/doc/vite/VerifyDoc.vue';
import VideoDoc from '@/doc/vite/VideoDoc.vue';
export default {
@ -33,27 +34,19 @@ export default {
component: DownloadDoc
},
{
id: 'plugin',
id: 'theme',
label: 'Plugin',
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, begin with the styled mode.',
children: [
{
id: 'styled',
label: 'Styled Mode',
component: StyledModeDoc
},
{
id: 'unstyled',
label: 'Unstyled Mode',
component: UnstyledModeDoc
}
]
component: PluginDoc
},
{
id: 'usage',
label: 'Usage',
component: UsageDoc
id: 'theme',
label: 'Theme',
component: ThemeDoc
},
{
id: 'verify',
label: 'Verify',
component: VerifyDoc
},
{
id: 'examples',
@ -64,6 +57,11 @@ export default {
id: 'video',
label: 'Video',
component: VideoDoc
},
{
id: 'nextsteps',
label: 'Next Steps',
component: NextStepsDoc
}
]
};