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

New Nuxt docs

pull/4126/head
Cagatay Civici 2023-10-15 23:57:44 +03:00
parent 6798b17cf4
commit 18576538e7
15 changed files with 452 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/menu/menu.json
View File

@ -11,6 +11,11 @@
{
"name": "Configuration",
"to": "/configuration"
},
{
"name": "Nuxt",
"to": "/nuxt",
"badge": "NEW"
}
]
},

15
doc/installation/DownloadDoc.vue
View File

@ -1,8 +1,8 @@
<template>
<DocSectionText v-bind="$attrs">
<p>PrimeVue is available for download at <a href="https://www.npmjs.com/package/primevue">npm</a>.</p>
<p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a>.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
</template>
<script>
@ -11,11 +11,14 @@ export default {
return {
code: {
basic: `
// with npm
npm install primevue
# Using npm
npm install --save-dev nuxt-primevue
// with yarn
yarn add primevue
# Using yarn
yarn add --dev nuxt-primevue
# Using pnpm
pnpm add -D nuxt-primevue
`
}
};

49
doc/installation/NuxtIntegrationDoc.vue
View File

@ -1,49 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>PrimeVue can easily be used with Nuxt 3 using a custom plugin.</p>
<h3>nuxt.config.js</h3>
<p>Open the nuxt configuration file and add the css dependencies. This step is only required when using styled mode and can be ignored in unstyled mode.</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<h3>primevue.js</h3>
<p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
export default defineNuxtConfig({
css: [
"primevue/resources/themes/lara-light-teal/theme.css"
],
build: {
transpile: ["primevue"]
}
})
`
},
code2: {
basic: `
import { defineNuxtPlugin } from "#app";
import PrimeVue from "primevue/config";
import Button from "primevue/button";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(PrimeVue, { ripple: true });
nuxtApp.vueApp.component("Button", Button);
//other components that you need
});
`
}
};
}
};
</script>

29
doc/nuxt/DownloadDoc.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
The <a href="https://www.npmjs.com/package/nuxt-primevue" target="_blank" rel="noopener noreferrer">nuxt-prime</a> package is the official module by PrimeTek.
</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
# Using npm
npm install --save-dev nuxt-primevue
# Using yarn
yarn add --dev nuxt-primevue
# Using pnpm
pnpm add -D nuxt-primevue
`
}
};
}
};
</script>

7
doc/nuxt/ExampleDoc.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
A sample <a href="https://github.com/primefaces/primevue-examples/tree/main/nuxt-quickstart" rel="noopener noreferrer">starter example</a> is available at PrimeVue examples repository.
</p>
</DocSectionText>
</template>

64
doc/nuxt/SetupDoc.vue Normal file
View File

@ -0,0 +1,64 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
The module is enabled by adding <i>nuxt-primevue</i> to the modules option. Configuration values are defined with the <i>primevue</i> property.
</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
<p>
The complete API with the all available configuration options along with the default values.
</p>
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
export default defineNuxtConfig({
modules: [
'nuxt-primevue'
],
primevue: {
/* Options */
}
})
`
},
code2: {
basic: `
export default defineNuxtConfig({
modules: [
'nuxt-primevue'
],
primevue: {
usePrimeVue: true,
options: {},
components: {
prefix: '',
name: undefined,
include: undefined,
exclude: undefined
},
directives: {
prefix: '',
name: undefined,
include: undefined,
exclude: undefined
},
composables: {
prefix: '',
name: undefined,
include: undefined,
exclude: undefined
}
}
})
`
}
};
}
};
</script>

29
doc/nuxt/StyleDoc.vue Normal file
View File

@ -0,0 +1,29 @@
<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 hideCodeSandbox 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/lara-dark-teal/theme.css']
})
`
}
};
}
};
</script>

8
doc/nuxt/VideoDoc.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A video tutorial that goes through steps of setting up PrimeVue with the nuxt-primevue module.</p>
</DocSectionText>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/sYGMrRUz9N0" frameborder="0" allowfullscreen></iframe>
</div>
</template>

72
doc/nuxt/configuration/ComponentsDoc.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<DocSectionText v-bind="$attrs">
<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 hideCodeSandbox hideStackBlitz />
<p>
In case all components are imported, particular components can still be excluded with the <i>exclude</i> option.
</p>
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
<p>
Use the <i>prefix</i> option to give a prefix to the registered component names.
</p>
<DocSectionCode :code="code3" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
<p>
Component registration can be customized further by implementing the <i>name</i> function that
gets an object representing the import metadata. <i>name</i> is the label of the component, <i>as</i> is the default export name and <i>from</i> is the import path.
</p>
<DocSectionCode :code="code4" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
primevue: {
components: {
include: ['Button', 'DataTable']
}
}
`
},
code2: {
basic: `
primevue: {
components: {
include: '*',
exclude: ['Galleria', 'Carousel']
}
}
`
},
code3: {
basic: `
primevue: {
components: {
prefix: 'Prime'
include: ['Button', 'DataTable'] /* Used as <PrimeButton /> and <DataTable /> */
}
}
`
},
code4: {
basic: `
primevue: {
components: {
name: ({ name: string, as: string, from: string }) => {
return name === 'Button' ? \`My\${name}\` : name;
}
include: ['Button', 'DataTable'] /* Used as <MyButton /> and <DataTable /> */
}
}
`
}
}
}
};
</script>

26
doc/nuxt/configuration/ComposablesDoc.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Determines the composables to use, when default value is ignored or set as <i>*</i> all composables are imported.
</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
primevue: {
composables: {
include: ['useStyle']
}
}
`
}
}
}
};
</script>

51
doc/nuxt/configuration/DirectivesDoc.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<DocSectionText v-bind="$attrs">
<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 * alias, all of the directives are registered.
</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
<p>
Similar to components, certain directives can be excluded and name registration can be customized.
</p>
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code3" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
primevue: {
directives: {
include: ['Ripple', 'Tooltip']
}
}
`
},
code2: {
basic: `
primevue: {
directives: {
include: '*',
exclude: ['Ripple']
}
}
`
},
code3: {
basic: `
primevue: {
directives: {
prefix: 'p'
include: ['Ripple', 'Tooltip'] /* Used as v-pripple and v-ptooltip */
}
}
`
}
}
}
};
</script>

31
doc/nuxt/configuration/OptionsDoc.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Main configuration settings of PrimeVue, refer to the <PrimeVueNuxtLink to="/configuration">configuration</PrimeVueNuxtLink> documentation for details. Defaults to an empty object.
</p>
</DocSectionText>
<DocSectionCode :code="code" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
primevue: {
options: {
unstyled: true,
ripple: true,
inputStyle: 'filled',
pt: {
}
}
}
`
}
};
}
};
</script>

24
doc/nuxt/configuration/UsePrimeVueDoc.vue Normal file
View File

@ -0,0 +1,24 @@
<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>
</DocSectionText>
<DocSectionCode :code="code" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
primevue: {
usePrimeVue: true
}
`
}
};
}
};
</script>

6
pages/installation/index.vue
View File

@ -18,7 +18,6 @@
<script>
import DownloadDoc from '@/doc/installation/DownloadDoc.vue';
import ExamplesDoc from '@/doc/installation/ExamplesDoc.vue';
import NuxtIntegrationDoc from '@/doc/installation/NuxtIntegrationDoc.vue';
import PluginDoc from '@/doc/installation/PluginDoc.vue';
import PropCasesDoc from '@/doc/installation/PropCasesDoc.vue';
import StyledModeDoc from '@/doc/installation/StyledModeDoc.vue';
@ -68,11 +67,6 @@ export default {
label: 'Prop Cases',
component: PropCasesDoc
},
{
id: 'nuxtintegration',
label: 'Nuxt Integration',
component: NuxtIntegrationDoc
},
{
id: 'examples',
label: 'Examples',

97
pages/nuxt/index.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<div>
<Head>
<Title>Nuxt Module - PrimeVue</Title>
<Meta name="description" content="PrimeVue has seamless integration with Nuxt using an exclusive module." />
</Head>
<div class="doc">
<div class="doc-main">
<div class="doc-intro">
<h1>Nuxt</h1>
<p>PrimeVue has seamless integration with Nuxt using the official module.</p>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</div>
</div>
</template>
<script>
import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
import SetupDoc from '@/doc/nuxt/SetupDoc.vue';
import UsePrimeVueDoc from '@/doc/nuxt/configuration/UsePrimeVueDoc.vue';
import OptionsDoc from '@/doc/nuxt/configuration/OptionsDoc.vue';
import ComponentsDoc from '@/doc/nuxt/configuration/ComponentsDoc.vue';
import DirectivesDoc from '@/doc/nuxt/configuration/DirectivesDoc.vue';
import ComposablesDoc from '@/doc/nuxt/configuration/ComposablesDoc.vue';
import StyleDoc from '@/doc/nuxt/StyleDoc.vue';
import ExampleDoc from '@/doc/nuxt/ExampleDoc.vue';
import VideoDoc from '../../doc/nuxt/VideoDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'download',
label: 'Download',
component: DownloadDoc
},
{
id: 'setup',
label: 'Setup',
component: SetupDoc
},
{
id: 'configuration',
label: 'Configuration',
children: [
{
id: 'useprimevue',
label: 'usePrimeVue',
component: UsePrimeVueDoc
},
{
id: 'options',
label: 'options',
component: OptionsDoc
},
{
id: 'components',
label: 'components',
component: ComponentsDoc
},
{
id: 'directives',
label: 'directives',
component: DirectivesDoc
},
{
id: 'composables',
label: 'composables',
component: ComposablesDoc
},
]
},
{
id: 'styles',
label: 'Styles',
component: StyleDoc
},
{
id: 'video',
label: 'Video',
component: VideoDoc
},
{
id: 'example',
label: 'Example',
component: ExampleDoc
}
]
};
}
};
</script>