[筆記] Primevue nuxt-module AutoImport tree-shaking 問題 @地瓜大的飛翔旅程

章節連結

內容

Manual 手動列出
@primevue/auto-import-resolver

參考資料

PrimeVue4 的 Nuxt 模組，其 AutoImport 這個屬性縱使設定為 true，打包出來的結果跟無設定相同。截至 4.3.7 版依舊沒有解決的情況下，筆記下可成功實現 tree-shaking 的方法。

內容

Manual 手動列出

在 nuxt.config.ts 中的 primevue.autoImport 設定為 false，同時將 primevue.components 一個個列出。如果你忘記的話，那你在壓出來的檔案其 css 會失常。只要將其補足，那就會正常呈現

@primevue/auto-import-resolver

搭配 unplugin-vue-components/vite，並將其放在 vite 的設定檔

import { PrimeVueResolver } from '@primevue/auto-import-resolver'
import Components from 'unplugin-vue-components/vite'

export default defineNuxtConfig({
  vite: {
    plugins: [
      Components({
        resolvers: [PrimeVueResolver()],
      }),
    ],
  },
})