Update nuxt doc
Cagatay Civici
parent
185ebc1dd1
commit
309c665bb1
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
`
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
`
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
}
|
||||
})
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,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,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>
|
||||
|
|
|
|||
|
|
@ -11,13 +11,27 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
primevue: {
|
||||
options: {
|
||||
unstyled: true,
|
||||
ripple: true,
|
||||
inputVariant: 'filled'
|
||||
import Aura from '@primevue/themes/aura';
|
||||
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'@primevue/nuxt-module'
|
||||
],
|
||||
primevue: {
|
||||
options: {
|
||||
ripple: true,
|
||||
inputVariant: 'filled',
|
||||
theme: {
|
||||
preset: Aura,
|
||||
options: {
|
||||
prefix: 'p',
|
||||
darkModeSelector: 'system',
|
||||
cssLayer: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
`
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
`
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default defineNuxtModule<ModuleOptions>({
|
|||
},
|
||||
defaults: {
|
||||
usePrimeVue: true,
|
||||
autoImport: false,
|
||||
autoImport: true,
|
||||
resolvePath: undefined,
|
||||
//cssLayerOrder: undefined,
|
||||
importPT: undefined,
|
||||
|
|
|
|||
Loading…
Reference in New Issue