Add vite and nuxt docs to get started
Cagatay Civici
parent
eaf337cd56
commit
a2ce2d0f72
|
|
@ -5,17 +5,21 @@
|
|||
"icon": "pi pi-home",
|
||||
"children": [
|
||||
{
|
||||
"name": "Installation",
|
||||
"to": "/installation"
|
||||
"name": "Introduction",
|
||||
"to": "/introduction"
|
||||
},
|
||||
{
|
||||
"name": "Vite Setup",
|
||||
"to": "/vite"
|
||||
},
|
||||
{
|
||||
"name": "Nuxt Setup",
|
||||
"to": "/nuxt"
|
||||
},
|
||||
{
|
||||
"name": "Configuration",
|
||||
"to": "/configuration"
|
||||
},
|
||||
{
|
||||
"name": "Nuxt",
|
||||
"to": "/nuxt"
|
||||
},
|
||||
{
|
||||
"name": "Playground",
|
||||
"to": "/playground"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <a href="https://www.npmjs.com/package/nuxt-primevue" target="_blank" rel="noopener noreferrer">nuxt-primevue</a> package is the official module by PrimeTek.</p>
|
||||
<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/nuxt-primevue" target="_blank" rel="noopener noreferrer">nuxt-primevue</a> module.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
|
@ -12,12 +15,15 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
# Using npm
|
||||
npm install primevue
|
||||
npm install --save-dev nuxt-primevue
|
||||
|
||||
# Using yarn
|
||||
yarn add primevue
|
||||
yarn add --dev nuxt-primevue
|
||||
|
||||
# Using pnpm
|
||||
pnpm add primevue
|
||||
pnpm add -D nuxt-primevue
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
In <i>nuxt.config</i> file, add the <i>nuxt-primevue</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>
|
||||
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'nuxt-primevue'
|
||||
],
|
||||
primevue: {
|
||||
/* Options */
|
||||
}
|
||||
})
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<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: {},
|
||||
importPT: undefined,
|
||||
cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities',
|
||||
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>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the
|
||||
<NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
|
||||
</p>
|
||||
<p>You may use the <i>app.vue</i> file to import a theme using a script.</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<p>The style section may also be used with <i>@import</i>.</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<p>Another alternative would be the <i>css</i> option in <i>nuxt.config</i>.</p>
|
||||
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>
|
||||
The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
|
||||
Normalize, or similar, a custom CSS layer configuration might be necessary with the <i>cssLayerOrder</i> option to make sure primevue layer is defined afterward. This only applies to Styled Mode as Unstyled Mode does not use any default
|
||||
styles or layers. View the <NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> guide for more information.
|
||||
</p>
|
||||
<DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code5" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
<script>
|
||||
import 'primevue/resources/themes/lara-light-green/theme.csss'
|
||||
<\/script>
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
<style>
|
||||
@import url("primevue/resources/themes/lara-light-green/theme.css");
|
||||
<\/style>
|
||||
`
|
||||
},
|
||||
code3: {
|
||||
basic: `
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'nuxt-primevue'
|
||||
],
|
||||
primevue: {
|
||||
/* Options */
|
||||
},
|
||||
css: ['primevue/resources/themes/lara-light-green/theme.css']
|
||||
})
|
||||
`
|
||||
},
|
||||
code4: {
|
||||
basic: `
|
||||
/* Reset CSS */
|
||||
@layer reset {
|
||||
button,
|
||||
input {
|
||||
/* CSS to Reset */
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code5: {
|
||||
basic: `
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'nuxt-primevue'
|
||||
],
|
||||
primevue: {
|
||||
cssLayerOrder: 'reset,primevue'
|
||||
},
|
||||
css: ['primevue/resources/themes/lara-light-green/theme.css']
|
||||
})
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Unstyled mode is disabled by default for all components. Set <i>unstyled</i> as true to enable it globally using a module configuration. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more information and
|
||||
examples.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>In unstyled mode, you'd need to style the components on your end. If you are using Tailwind CSS, see the <a href="https://tailwind.primevue.org/nuxt/">Tailwind CSS Presets</a> project to get you started.</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'nuxt-primevue'
|
||||
],
|
||||
primevue: {
|
||||
unstyled: true
|
||||
}
|
||||
})
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
import path from 'path';
|
||||
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'nuxt-primevue'
|
||||
],
|
||||
primevue: {
|
||||
unstyled: true,
|
||||
importPT: { from: path.resolve(__dirname, './presets/lara/') } //import and apply preset
|
||||
}
|
||||
})
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<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>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Check" icon="pi pi-check" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button label="Check" icon="pi pi-check" />
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a>.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
# Using npm
|
||||
npm install primevue
|
||||
|
||||
# Using yarn
|
||||
yarn add primevue
|
||||
|
||||
# Using pnpm
|
||||
pnpm add primevue
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p class="mb-0">
|
||||
We've created various samples for the popular options in the Vue ecosystem. Visit the <a href="https://github.com/primefaces/primevue-examples">primevue-examples</a> repository for more samples including
|
||||
<a href="https://github.com/primefaces/primevue-examples/tree/main/vite-quickstart" target="_blank" rel="noopener noreferrer">vite-quickstart</a> and
|
||||
<a href="https://github.com/primefaces/primevue-examples/tree/main/vite-ts-quickstart" target="_blank" rel="noopener noreferrer">vite-ts-quickstart</a>.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<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>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import { createApp } from 'vue';
|
||||
import PrimeVue from 'primevue/config';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(PrimeVue);
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the
|
||||
<NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>
|
||||
The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
|
||||
Normalize, or similar, a custom CSS layer configuration might be necessary. This only applies to Styled Mode as Unstyled Mode does not use any default styles or layers. View the <NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> guide
|
||||
for more information.
|
||||
</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
//in main.js
|
||||
import 'primevue/resources/themes/lara-light-green/theme.css'
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
/* Order */
|
||||
@layer reset, primevue;
|
||||
|
||||
/* Reset CSS */
|
||||
@layer reset {
|
||||
button,
|
||||
input {
|
||||
/* CSS to Reset */
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Unstyled mode is disabled by default for all components. Using the PrimeVue plugin during installation, set <i>unstyled</i> as true to enable it globally. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more
|
||||
information and examples.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>In unstyled mode, you'd need to style the components on your end. If you are using Tailwind CSS, see the <a href="https://tailwind.primevue.org/vite/">Tailwind CSS Presets</a> project to get you started.</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox 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
|
||||
});
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
import { createApp } from 'vue';
|
||||
import PrimeVue from 'primevue/config';
|
||||
import Lara from '@/presets/lara'; //import preset
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(PrimeVue, {
|
||||
unstyled: true,
|
||||
pt: Lara //apply preset
|
||||
});
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<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.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Check" icon="pi pi-check" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" importCode />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import Button from "primevue/button"
|
||||
|
||||
const app = createApp(App);
|
||||
app.component('Button', Button);
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Check" icon="pi pi-check" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Check" icon="pi pi-check" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
<a alt="Create Vue App" href="https://github.com/vuejs/create-vue">Create-Vue</a>
|
||||
is the recommended way to start a Vite-powered Vue project.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<div class="video-container">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/FjYesOz95MM" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,15 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<Head>
|
||||
<Title>Nuxt Module - PrimeVue</Title>
|
||||
<Meta name="description" content="PrimeVue has seamless integration with Nuxt using an exclusive module." />
|
||||
<Title>Install PrimeVue with Nuxt</Title>
|
||||
<Meta name="description" content="Setting up PrimeVue in a Nuxt project" />
|
||||
</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>
|
||||
<h1>Install PrimeVue with Nuxt</h1>
|
||||
<p>Setting up PrimeVue in a Nuxt project.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
|
|
@ -20,9 +19,12 @@
|
|||
|
||||
<script>
|
||||
import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
|
||||
import ExampleDoc from '@/doc/nuxt/ExampleDoc.vue';
|
||||
import SetupDoc from '@/doc/nuxt/SetupDoc.vue';
|
||||
import StyleDoc from '@/doc/nuxt/StyleDoc.vue';
|
||||
import ExamplesDoc from '@/doc/nuxt/ExamplesDoc.vue';
|
||||
import ModuleSetupDoc from '@/doc/nuxt/ModuleSetupDoc.vue';
|
||||
import StyledModeDoc from '@/doc/nuxt/StyledModeDoc.vue';
|
||||
import UnstyledModeDoc from '@/doc/nuxt/UnstyledModeDoc.vue';
|
||||
import UsageDoc from '@/doc/nuxt/UsageDoc.vue';
|
||||
import VideoDoc from '@/doc/nuxt/VideoDoc.vue';
|
||||
import CSSLayerOrderDoc from '@/doc/nuxt/configuration/CSSLayerOrderDoc.vue';
|
||||
import ComponentsDoc from '@/doc/nuxt/configuration/ComponentsDoc.vue';
|
||||
import ComposablesDoc from '@/doc/nuxt/configuration/ComposablesDoc.vue';
|
||||
|
|
@ -30,7 +32,6 @@ import DirectivesDoc from '@/doc/nuxt/configuration/DirectivesDoc.vue';
|
|||
import ImportPTDoc from '@/doc/nuxt/configuration/ImportPTDoc.vue';
|
||||
import OptionsDoc from '@/doc/nuxt/configuration/OptionsDoc.vue';
|
||||
import UsePrimeVueDoc from '@/doc/nuxt/configuration/UsePrimeVueDoc.vue';
|
||||
import VideoDoc from '../../doc/nuxt/VideoDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -42,13 +43,35 @@ export default {
|
|||
component: DownloadDoc
|
||||
},
|
||||
{
|
||||
id: 'setup',
|
||||
label: 'Setup',
|
||||
component: SetupDoc
|
||||
id: 'module-setup',
|
||||
label: 'Module Setup',
|
||||
component: ModuleSetupDoc
|
||||
},
|
||||
{
|
||||
id: 'theming',
|
||||
label: 'Theming',
|
||||
description: 'PrimeVue has two theming modes; styled or unstyled.',
|
||||
children: [
|
||||
{
|
||||
id: 'styled',
|
||||
label: 'Styled Mode',
|
||||
component: StyledModeDoc
|
||||
},
|
||||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled Mode',
|
||||
component: UnstyledModeDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'usage',
|
||||
label: 'Usage',
|
||||
component: UsageDoc
|
||||
},
|
||||
{
|
||||
id: 'configuration',
|
||||
label: 'Configuration',
|
||||
label: 'Module Configuration',
|
||||
children: [
|
||||
{
|
||||
id: 'useprimevue',
|
||||
|
|
@ -88,14 +111,9 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
id: 'styles',
|
||||
label: 'Styles',
|
||||
component: StyleDoc
|
||||
},
|
||||
{
|
||||
id: 'example',
|
||||
label: 'Example',
|
||||
component: ExampleDoc
|
||||
id: 'examples',
|
||||
label: 'Examples',
|
||||
component: ExamplesDoc
|
||||
},
|
||||
{
|
||||
id: 'video',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<Head>
|
||||
<Title>Install PrimeVue with Vite</Title>
|
||||
<Meta name="description" content="Setting up PrimeVue in a Vite project" />
|
||||
</Head>
|
||||
<div class="doc">
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Install PrimeVue with Vite</h1>
|
||||
<p>Setting up PrimeVue in a Vite project.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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';
|
||||
import CreateVueDoc from '@/doc/vite/videos/CreateVueDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'download',
|
||||
label: 'Download',
|
||||
component: DownloadDoc
|
||||
},
|
||||
{
|
||||
id: 'plugin',
|
||||
label: 'Plugin',
|
||||
component: PluginDoc
|
||||
},
|
||||
{
|
||||
id: 'theming',
|
||||
label: 'Theming',
|
||||
description: 'PrimeVue has two theming modes; styled or unstyled.',
|
||||
children: [
|
||||
{
|
||||
id: 'styled',
|
||||
label: 'Styled Mode',
|
||||
component: StyledModeDoc
|
||||
},
|
||||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled Mode',
|
||||
component: UnstyledModeDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'usage',
|
||||
label: 'Usage',
|
||||
component: UsageDoc
|
||||
},
|
||||
{
|
||||
id: 'examples',
|
||||
label: 'Examples',
|
||||
component: ExamplesDoc
|
||||
},
|
||||
{
|
||||
id: 'videos',
|
||||
label: 'Video Tutorial',
|
||||
component: CreateVueDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue