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

Update nuxt doc

pull/6011/head
Cagatay Civici 2024-07-03 13:06:06 +03:00
parent 185ebc1dd1
commit 309c665bb1
18 changed files with 202 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/showcase/doc/cdn/ExampleDoc.vue
View File

@ -20,8 +20,8 @@ export default {
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
<script src="https://unpkg.com/primevue@4.0.0-rc.2/umd/primevue.min.js"><\/script>
<script src="https://unpkg.com/@primevue/themes@4.0.0-rc.2/umd/aura.min.js"><\/script>
<script src="https://unpkg.com/primevue/umd/primevue.min.js"><\/script>
<script src="https://unpkg.com/@primevue/themes/umd/aura.min.js"><\/script>
<div id="app">
<p-datepicker v-model="date"></p-datepicker>

4
apps/showcase/doc/cdn/ScriptDoc.vue
View File

@ -16,8 +16,8 @@ export default {
code: {
basic: `
https://unpkg.com/vue@3/dist/vue.global.js
https://unpkg.com/primevue@4.0.0-rc.2/umd/primevue.min.js
https://unpkg.com/@primevue/themes@4.0.0-rc.2/umd/aura.min.js // see theming for alternatives
https://unpkg.com/primevue/umd/primevue.min.js
https://unpkg.com/@primevue/themes/umd/aura.min.js // see theming for alternatives
`
}
};

8
apps/showcase/doc/cdn/ThemingDoc.vue
View File

@ -11,11 +11,11 @@ export default {
return {
code: {
basic: `
<!-- <script src="https://unpkg.com/@primevue/themes@4.0.0-rc.2/umd/{preset}.min.js"><\/script> -->
<!-- <script src="https://unpkg.com/@primevue/themes/umd/{preset}.min.js"><\/script> -->
<script src="https://unpkg.com/@primevue/themes@4.0.0-rc.2/umd/aura.min.js"><\/script>
<script src="https://unpkg.com/@primevue/themes@4.0.0-rc.2/umd/lara.min.js"><\/script>
<script src="https://unpkg.com/@primevue/themes@4.0.0-rc.2/umd/nora.min.js"><\/script>
<script src="https://unpkg.com/@primevue/themes/umd/aura.min.js"><\/script>
<script src="https://unpkg.com/@primevue/themes/umd/lara.min.js"><\/script>
<script src="https://unpkg.com/@primevue/themes/umd/nora.min.js"><\/script>
`
}
};

40
apps/showcase/doc/nuxt/AutoImportDoc.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
The <NuxtLink to="/autoimport">auto import</NuxtLink> feature registers components automatically with tree shaking support. Defaults to <i>true</i>, when disabled use include/exclude options of <i>components</i> and <i>directives</i> for
manual registration.
</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
<p>Use the <i>prefix</i> in <i>components</i> and <i>directives</i> to add a prefix for registration.</p>
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
primevue: {
autoImport: true|false
}
`
},
code2: {
basic: `
primevue: {
autoImport: true|false,
components: {
prefix: 'org'
},
directives: {
prefix: 'org'
}
}
`
}
};
}
};
</script>

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

@ -15,16 +15,16 @@ export default {
code: {
basic: `
# Using npm
npm install primevue@4.0.0-rc.2
npm install --save-dev @primevue/nuxt-module@4.0.0-rc.2
npm install primevue
npm install --save-dev @primevue/nuxt-module
# Using yarn
yarn add primevue@4.0.0-rc.2
yarn add --dev @primevue/nuxt-module@4.0.0-rc.2
yarn add primevue
yarn add --dev @primevue/nuxt-module
# Using pnpm
pnpm add primevue@4.0.0-rc.2
pnpm add -D @primevue/nuxt-module@4.0.0-rc.2
pnpm add primevue
pnpm add -D @primevue/nuxt-module
`
}
};

7
apps/showcase/doc/nuxt/SetupDoc.vue
View File

@ -1,9 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
In <i>nuxt.config</i> file, add the <i>@primevue/nuxt-module</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>
<p>In <i>nuxt.config</i> file, add the <i>@primevue/nuxt-module</i> to the modules section and define <i>primevue</i> object for the configuration of the module.</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
</DocSectionText>
</template>
@ -19,7 +16,7 @@ export default defineNuxtConfig({
'@primevue/nuxt-module'
],
primevue: {
/* Options */
/* Configuration */
}
})
`

48
apps/showcase/doc/nuxt/StyledModeDoc.vue Normal file
View File

@ -0,0 +1,48 @@
<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 the module 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 Aura from '@primevue/themes/aura';
export default defineNuxtConfig({
modules: [
'@primevue/nuxt-module'
],
primevue: {
options: {
theme: {
preset: Aura
}
}
}
})
`
}
};
}
};
</script>

32
apps/showcase/doc/nuxt/UnstyledModeDoc.vue Normal file
View File

@ -0,0 +1,32 @@
<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: `
export default defineNuxtConfig({
modules: [
'@primevue/nuxt-module'
],
primevue: {
options: {
unstyled: true
}
}
})
`
}
};
}
};
</script>

2
apps/showcase/doc/nuxt/UsageDoc.vue
View File

@ -1,6 +1,6 @@
<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>
<p>The nuxt-primevue module registers the components automatically so you may start using them instantly.</p>
</DocSectionText>
<div class="card flex justify-center">
<Button label="Check" icon="pi pi-check" />

1
apps/showcase/doc/nuxt/configuration/ComponentsDoc.vue
View File

@ -1,5 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>autoImport</i> is disabled, use the <i>include</i> and <i>exclude</i> for manual registration.</p>
<p>The components to import and register are defined with the <i>include</i> option using a string array. When the value is ignored or set using the <i>*</i> alias, all of the components are registered.</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
<p>In case all components are imported, particular components can still be excluded with the <i>exclude</i> option.</p>

1
apps/showcase/doc/nuxt/configuration/DirectivesDoc.vue
View File

@ -1,5 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>autoImport</i> is disabled, use the <i>include</i> and <i>exclude</i> for manual registration.</p>
<p>The names of the directives to import and register are provided using the <i>include</i> property. When the value is ignored or set using the <i>*</i> alias, all of the directives are registered.</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
<p>Similar to components, certain directives can be excluded and name registration can be customized.</p>

18
apps/showcase/doc/nuxt/configuration/OptionsDoc.vue
View File

@ -11,13 +11,27 @@ export default {
return {
code: {
basic: `
import Aura from '@primevue/themes/aura';
export default defineNuxtConfig({
modules: [
'@primevue/nuxt-module'
],
primevue: {
options: {
unstyled: true,
ripple: true,
inputVariant: 'filled'
inputVariant: 'filled',
theme: {
preset: Aura,
options: {
prefix: 'p',
darkModeSelector: 'system',
cssLayer: false
}
}
}
}
})
`
}
};

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

@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Whether to install the PrimeVue plugin, defaults to <i>true</i>. Disable this option if you prefer to configure PrimeVue manually e.g. with a Nuxt plugin.</p>
<p>The module installs the PrimeVue plugin by default. Disable this option if you prefer to configure PrimeVue manually e.g. with a Nuxt plugin.</p>
</DocSectionText>
<DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
</template>

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

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

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

@ -15,13 +15,13 @@ export default {
code1: {
basic: `
# Using npm
npm install @primevue/themes@4.0.0-rc.2
npm install @primevue/themes
# Using yarn
yarn add @primevue/themes@4.0.0-rc.2
yarn add @primevue/themes
# Using pnpm
pnpm add @primevue/themes@4.0.0-rc.2
pnpm add @primevue/themes
`
},
code2: {

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

@ -4,10 +4,6 @@
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>
<p>
If you are using Tailwind CSS and prefer to have full control over the component styling, 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="code1" hideToggleCode importCode hideStackBlitz />
</DocSectionText>
</template>

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

@ -18,9 +18,12 @@
</template>
<script>
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 ComponentsDoc from '@/doc/nuxt/configuration/ComponentsDoc.vue';
import ComposablesDoc from '@/doc/nuxt/configuration/ComposablesDoc.vue';
@ -44,6 +47,23 @@ export default {
label: 'Setup',
component: SetupDoc
},
{
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: 'usage',
label: 'Usage',
@ -63,6 +83,21 @@ export default {
label: 'options',
component: OptionsDoc
},
{
id: 'autoimport',
label: 'autoImport',
component: AutoImportDoc
},
{
id: 'importpt',
label: 'importPT',
component: ImportPTDoc
},
{
id: 'importtheme',
label: 'importTheme',
component: ImportThemeDoc
},
{
id: 'components',
label: 'components',
@ -77,16 +112,6 @@ export default {
id: 'composables',
label: 'composables',
component: ComposablesDoc
},
{
id: 'importpt',
label: 'importPT',
component: ImportPTDoc
},
{
id: 'importtheme',
label: 'importTheme',
component: ImportThemeDoc
}
]
},

2
packages/nuxt-module/src/module.ts
View File

@ -16,7 +16,7 @@ export default defineNuxtModule<ModuleOptions>({
},
defaults: {
usePrimeVue: true,
autoImport: false,
autoImport: true,
resolvePath: undefined,
//cssLayerOrder: undefined,
importPT: undefined,