<template>
    <Head>
        <Title>Theming PrimeVue with Tailwind CSS in a Nuxt project.</Title>
        <Meta name="description" content="Theming PrimeVue with Tailwind CSS in a Nuxt project." />
    </Head>
    <div class="doc">
        <div class="doc-main">
            <div class="doc-intro">
                <h1>Installation with Nuxt</h1>
                <p>Theming PrimeVue with Tailwind CSS in a Nuxt project.</p>
            </div>
            <DocSections :docs="docs" />
        </div>
        <DocSectionNav :docs="docs" />
    </div>
</template>

<script setup>
import CSSVariablesDoc from '@/doc/nuxt/CSSVariablesDoc.vue';
import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
import ExampleDoc from '@/doc/nuxt/ExampleDoc.vue';
import NuxtConfigDoc from '@/doc/nuxt/NuxtConfigDoc.vue';
import StylesDoc from '@/doc/nuxt/StylesDoc.vue';
import TailwindDoc from '@/doc/nuxt/TailwindDoc.vue';
import ImportStylesDoc from '@/doc/nuxt/tailwind/ImportStylesDoc.vue';
import PostCSSImportDoc from '@/doc/nuxt/tailwind/PostCSSImportDoc.vue';
import PrimeUIPluginDoc from '@/doc/nuxt/tailwind/PrimeUIPluginDoc.vue';
import { ref } from 'vue';

const docs = ref([
    {
        id: 'tailwind',
        label: 'Tailwind CSS',
        component: TailwindDoc
    },
    {
        id: 'download',
        label: 'Download',
        component: DownloadDoc
    },
    {
        id: 'nuxtconfig',
        label: 'Nuxt Config',
        component: NuxtConfigDoc
    },
    {
        id: 'styles',
        label: 'Styles',
        component: StylesDoc
    },
    {
        id: 'tailwind-config',
        label: 'Tailwind Config',
        children: [
            {
                id: 'primeuiplugin',
                label: 'PrimeUI Plugin',
                component: PrimeUIPluginDoc
            },
            {
                id: 'postcssimport',
                label: 'PostCSS Import',
                component: PostCSSImportDoc
            },
            {
                id: 'importstyles',
                label: 'Import Styles',
                component: ImportStylesDoc
            }
        ]
    },
    {
        id: 'css-variables',
        label: 'CSS Variables',
        component: CSSVariablesDoc
    },
    {
        id: 'example',
        label: 'Example',
        component: ExampleDoc
    }
]);
</script>
