はじめに
この記事は、Vue3とNuxtプロジェクトでIgnite UI for Web Componentsを使用してテーブルを表示する際の備忘録として作成しました。
案件で扱う機会があったものの、Vue3でIgniteUIを使用する記事が無く、セットアップに手間取ることがあったため、実装する過程で得た知見をまとめ、今後同様の作業を行う際の参考資料として本記事を作成しました。ゼロからのセットアップ手順から、実際のセットアップ時に遭遇した問題とその対処法まで、実践的な内容を記載しています。
概要
この記事では、Vue3とNuxtプロジェクトでIgnite UI for Web Componentsのグリッドコンポーネントを使用してテーブルを表示するまでの手順を説明します。
使用環境
この記事で使用している主なパッケージのバージョンは以下の通りです：
-
Nuxt:
^3.15.4 -
Vue:
latest(Vue 3系) -
TypeScript:
^5.7.3 -
igniteui-webcomponents:
^5.2.4 -
igniteui-webcomponents-grids:
^5.3.0 -
@webcomponents/custom-elements:
^1.6.0
注意: バージョンによって動作が異なる可能性があります。問題が発生した場合は、上記のバージョンでの動作を確認してください。
ゴール
この記事を読むことで、以下のことができるようになります：
- Vue3 + NuxtプロジェクトでIgniteUIのグリッドコンポーネントをセットアップできる
- 画面上でテーブル（グリッド）を表示できる
- セットアップ時に発生しやすい問題を理解し、対処できる
実装手順
1. パッケージのインストール
必要なパッケージをインストールします。
npm install igniteui-webcomponents@^5.2.4 igniteui-webcomponents-grids@^5.3.0 @webcomponents/custom-elements@^1.6.0
インストールするパッケージの説明：
-
igniteui-webcomponents: IgniteUIのコアコンポーネントライブラリ -
igniteui-webcomponents-grids: グリッド（テーブル）コンポーネント -
@webcomponents/custom-elements: Web Componentsのカスタムエレメントサポート（IgniteUIがWeb Componentsベースのため必要）
2. Nuxt設定の追加
nuxt.config.tsにIgniteUI用の設定を追加します。
export default defineNuxtConfig({
css: [
'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css',
// カスタムスタイルがある場合は追加
// './assets/styles/igniteui/grid-customize.scss',
],
vue: {
compilerOptions: {
// igc-で始まるタグをカスタムエレメントとして認識
isCustomElement: (tag) => tag.startsWith('igc-'),
},
},
});
重要な設定：
-
css: IgniteUIのテーマCSSを読み込む -
vue.compilerOptions.isCustomElement:igc-で始まるタグ（IgniteUIのコンポーネント）をVueのカスタムエレメントとして認識させる
3. プラグインの作成
plugins/igniteui.client.tsを作成してIgniteUIを初期化します。
import '@webcomponents/custom-elements/custom-elements.min';
import '@webcomponents/custom-elements/src/native-shim.js';
import 'igniteui-webcomponents-grids/grids/combined';
import { defineComponents, IgcIconComponent } from 'igniteui-webcomponents';
// アイコンコンポーネントを定義
defineComponents(IgcIconComponent);
export default defineNuxtPlugin(() => {});
プラグインの説明：
-
custom-elements.min: Web Componentsのポリフィル -
native-shim.js: ネイティブサポートのためのシム -
grids/combined: グリッドコンポーネントの読み込み -
defineComponents: IgniteUIコンポーネントの登録
注意： プラグインファイル名に.client.tsを付けることで、クライアントサイドでのみ実行されます。
4. スタイルの設定（オプション）
カスタムスタイルを適用する場合は、SCSSファイルを作成します。
assets/styles/igniteui/grid-customize.scssを作成：
.igx-grid {
--ig-size: var(--ig-size-small);
--ig-icon-color: #333;
--content-text-color: #333;
--header-background: #f8f9fa;
--row-odd-background: #ffffff;
--row-even-background: #f8f9fa;
--row-hover-background: #e9ecef;
--cell-selected-background: #e9ecef;
--grid-shadow: none;
--header-border-color: #dee2e6;
--row-border-color: #dee2e6;
}
作成したSCSSファイルをnuxt.config.tsのcss配列に追加：
css: [
'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css',
'./assets/styles/igniteui/grid-customize.scss',
],
5. テーブル表示の実装
Vueコンポーネントでigc-gridを使用してテーブルを表示します。
<template>
<div>
<igc-grid id="sample-grid" auto-generate="false" overflow="scroll">
<igc-column
field="id"
header="ID"
data-type="number"
sortable="true"
></igc-column>
<igc-column field="name" header="名前" sortable="true"></igc-column>
<igc-column field="email" header="メールアドレス"></igc-column>
<igc-column
field="age"
header="年齢"
data-type="number"
sortable="true"
></igc-column>
</igc-grid>
</div>
</template>
<script setup lang="ts">
import type { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
// サンプルデータ
const dataSource = [
{ id: 1, name: '山田太郎', email: 'yamada@example.com', age: 30 },
{ id: 2, name: '佐藤花子', email: 'sato@example.com', age: 25 },
{ id: 3, name: '鈴木一郎', email: 'suzuki@example.com', age: 35 },
];
onMounted(() => {
// グリッド要素を取得
const grid = document.getElementById('sample-grid') as IgcGridComponent;
// データを設定
if (grid) {
grid.data = dataSource;
}
});
</script>
実装のポイント：
-
igc-grid: グリッドコンテナ-
id: 後でJavaScriptから参照するためのID -
auto-generate="false": 自動カラム生成を無効化（手動でカラムを定義） -
overflow="scroll": スクロール可能にする
-
-
igc-column: カラム定義-
field: データソースのプロパティ名 -
header: カラムヘッダーの表示名 -
data-type: データ型（number,string,dateなど） -
sortable: ソート可能かどうか -
filterable: フィルタ可能かどうか
-
-
onMounted: コンポーネントマウント後にグリッドにデータを設定
セットアップ時の注意点
IgniteUIを使用する際に発生しやすい問題とその対処法を説明します。
SSR（Server-Side Rendering）の設定
問題：
IgniteUIはWeb Componentsベースのため、サーバーサイドレンダリング（SSR）環境でエラーが発生する場合があります。
対処法：
nuxt.config.tsでSSRを無効化するか、プラグインをクライアントサイドでのみ実行するように設定します。
方法1: SSRを完全に無効化（開発時のみ推奨）
export default defineNuxtConfig({
ssr: false, // SSRを無効化
// ... その他の設定
});
方法2: プラグインをクライアントサイドでのみ実行（推奨）
プラグインファイル名に.client.tsを付けることで、クライアントサイドでのみ実行されます。
// plugins/igniteui.client.ts
// .client.ts という拡張子により、クライアントサイドでのみ実行される
方法3: 特定のページでのみSSRを無効化
<script setup lang="ts">
definePageMeta({
ssr: false,
});
</script>
カスタムエレメントの設定
問題：
Vueがigc-で始まるタグを認識しない場合、コンパイルエラーが発生します。
対処法：
nuxt.config.tsでisCustomElementを設定します。
vue: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('igc-'),
},
},
その他のよくある問題
1. グリッドにデータが表示されない
原因：
-
onMountedでデータを設定していない - データソースのプロパティ名と
field属性が一致していない
対処法：
-
onMounted内で確実にデータを設定する - データソースの構造を確認し、
field属性と一致させる
onMounted(() => {
const grid = document.getElementById('sample-grid') as IgcGridComponent;
if (grid) {
grid.data = dataSource; // データを設定
}
});
2. スタイルが適用されない
原因：
- CSSファイルが読み込まれていない
- カスタムスタイルの優先度が低い
対処法：
-
nuxt.config.tsのcss配列にテーマCSSが含まれているか確認 - カスタムスタイルに
!importantを使用するか、より具体的なセレクタを使用
3. TypeScriptの型エラー
原因：
- IgniteUIの型定義が読み込まれていない
対処法：
型を明示的にインポートする：
import type {
IgcGridComponent,
IgcColumnComponent,
} from 'igniteui-webcomponents-grids/grids';
4. プラグインが実行されない
原因：
- プラグインファイル名が正しくない
- プラグインのエクスポートが正しくない
対処法：
- プラグインファイル名は
plugins/igniteui.client.tsのように.client.tsで終わる必要がある -
defineNuxtPluginを使用してプラグインを定義する
まとめ
IgniteUIをVue3 + Nuxtプロジェクトで使用するには、以下の手順が必要です：
- 必要なパッケージをインストール
- Nuxt設定でカスタムエレメントとCSSを設定
- クライアントサイドプラグインでIgniteUIを初期化
- Vueコンポーネントで
igc-gridを使用 -
onMountedでデータを設定
特に、SSRの設定とカスタムエレメントの認識設定は重要です。問題が発生した場合は、上記の注意点を確認してください。