自動インポート

自動インポートとツリーシェイキングによるオンデマンドPrimeVueコンポーネント。

概要 #

PrimeVueコンポーネントは個別にインポートして設定する必要があります。次のセクションでは、自動インポートを使用してコードを整理します。


import { createApp } from "vue";
import PrimeVue from "primevue/config";
import InputText from 'primevue/inputtext';
import Button from 'primevue/button';
import App from './App.vue'
const app = createApp(App);

app.use(PrimeVue);
app.component('InputText', InputText);
app.component('Button', Button);

Unplugin #

unplugin-vue-componentsライブラリは、@primevue/auto-import-resolver を使用してPrimeVueコンポーネントを自動的にインポートおよび登録できます。まず、パッケージを開発依存関係としてインストールします。


npm i unplugin-vue-components -D
npm i @primevue/auto-import-resolver -D

次のステップは、Componentsプラグインを使用して、vite.configでPrimeVueResolverを追加することです。


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

// https://vite.dokyumento.jp/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        PrimeVueResolver()
      ]
    })]
})

これで完了です。初期化コードは次のようにリファクタリングできます。名前空間などの設定については、公式ドキュメントを参照してください。


import { createApp } from "vue";
import PrimeVue from "primevue/config";
import App from './App.vue'
const app = createApp(App);

app.use(PrimeVue);

例 #

自動インポートを使用したPrimeVueの完全な例は、プレイグラウンドでご覧いただけます。