在 Nuxt 中安裝 PrimeVue

在 Nuxt 專案中設定 PrimeVue。

下載 #

PrimeVue 可在 npm 註冊表上下載，同時還有官方的 @primevue/nuxt-module。


# Using npm
npm install primevue @primevue/themes
npm install --save-dev @primevue/nuxt-module

# Using yarn
yarn add primevue @primevue/themes
yarn add --dev @primevue/nuxt-module

# Using pnpm
pnpm add primevue @primevue/themes
pnpm add -D @primevue/nuxt-module

模組 #

在 nuxt.config 檔案中，將 @primevue/nuxt-module 新增至 modules 區段，並定義 primevue 物件以設定模組。


export default defineNuxtConfig({
    modules: [
        '@primevue/nuxt-module'
    ],
    primevue: {
        /* Configuration */
    }
})

主題 #

設定模組以使用像 Aura 這樣的主題。


import Aura from '@primevue/themes/aura';

export default defineNuxtConfig({
    modules: [
        '@primevue/nuxt-module'
    ],
    primevue: {
        options: {
            theme: {
                preset: Aura
            }
        }
    }
})

驗證 #

nuxt-primevue 模組會自動註冊元件，並支援 tree-shaking，因此您可以立即開始使用它們。


<Button label="Verify" />

設定 #

usePrimeVue #

模組預設會安裝 PrimeVue 外掛程式。如果您偏好手動設定 PrimeVue (例如使用 Nuxt 外掛程式)，請停用此選項。


primevue: {
    usePrimeVue: true | false
}

options #

PrimeVue 的主要設定，請參閱設定文件以了解詳細資訊。


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
                }
            }
        }
    }
})

autoImport #

自動匯入功能會自動註冊元件，並支援 tree-shaking。預設為 true，停用時，請使用 components 和 directives 的 include/exclude 選項進行手動註冊。


primevue: {
    autoImport: true|false
}

在 components 和 directives 中使用 prefix 為註冊新增前置詞。


primevue: {
    autoImport: true|false,
    components: {
        prefix: 'org'
    },
    directives: {
        prefix: 'org'
    }
}

importPT #

設定全域傳遞匯入路徑。


primevue: {
    importPT: { from: '@/passthrough/mycustompt.js' }
}

mycustompt.js 檔案定義設定並匯出它。


const MyCustomPT = {
    ...
    button: {
        root: 'my-button',
       ...
    },
    ...
}

export default MyCustomPT;

importTheme #

設定主題設定路徑，以在樣式化模式中自訂主題。


primevue: {
    importTheme: { from: '@/themes/mytheme.js' },
}

mytheme.js 檔案包含主題設定。


import { definePreset } from '@primevue/themes';
import Aura from '@primevue/themes/aura';

const MyPreset = definePreset(Aura, {
    semantic: {
        primary: {
            50: '{indigo.50}',
            100: '{indigo.100}',
            200: '{indigo.200}',
            300: '{indigo.300}',
            400: '{indigo.400}',
            500: '{indigo.500}',
            600: '{indigo.600}',
            700: '{indigo.700}',
            800: '{indigo.800}',
            900: '{indigo.900}',
            950: '{indigo.950}'
        }
    }
});

export default {
    preset: MyPreset,
    options: {
        darkModeSelector: '.p-dark'
    }
};

components #

當 autoImport 停用時，請使用 include 和 exclude 進行手動註冊。

要匯入和註冊的元件使用字串陣列透過 include 選項來定義。當值被忽略或使用 * 別名設定時，所有元件都會被註冊。


primevue: {
    components: {
        include: ['Button', 'DataTable']
    }
}

如果匯入所有元件，仍然可以使用 exclude 選項排除特定元件。


primevue: {
    components: {
        include: '*',
        exclude: ['Galleria', 'Carousel']
    }
}

預設情況下，出於相容性考量，會排除 Chart 和 Editor 元件。要包含它們，只需將 exclude 選項設定為空列表即可。


primevue: {
    components: {
        exclude: []
    }
}

使用 prefix 選項為註冊的元件名稱加上前置詞。


primevue: {
    components: {
        prefix: 'Prime'
        include: ['Button', 'DataTable']    /* Used as <PrimeButton /> and <PrimeDataTable /> */
    }
}

元件註冊可以透過實作 name 函數進一步自訂，該函數會取得代表匯入元資料的物件。name 是元件的標籤，as 是預設匯出名稱，而 from 是匯入路徑。


primevue: {
    components: {
        name: ({ name, as, from }) => {
            return name === 'Button' ? `My${name}` : name;
        },
        include: ['Button', 'DataTable']    /* Used as <MyButton /> and <DataTable /> */
    }
}

directives #

當 autoImport 停用時，請使用 include 和 exclude 進行手動註冊。

要匯入和註冊的指令名稱使用 include 屬性提供。當值被忽略或使用 * 別名設定時，所有指令都會被註冊。


primevue: {
    directives: {
        include: ['Ripple', 'Tooltip']
    }
}

與元件類似，可以排除某些指令，並且可以自訂名稱註冊。


primevue: {
    directives: {
        include: '*',
        exclude: ['Ripple']
    }
}


primevue: {
    directives: {
        prefix: 'p'
        include: ['Ripple', 'Tooltip']    /* Used as v-pripple and v-ptooltip */
    }
}

composables #

決定要使用的 composable，當預設值被忽略或設定為 * 時，會匯入所有 composable。


primevue: {
    composables: {
        include: ['useStyle']
    }
}

範例 #

在 PrimeVue 範例儲存庫中，提供了具有不同選項的基於 Nuxt 的範例。

後續步驟 #

歡迎使用 Prime UI 生態系統！在您成功啟動並執行 PrimeVue 之後，我們建議您探索以下資源，以更深入了解程式庫。