Nuxt.js
はじめに
Nuxt.js は、Vue.js上に構築された強力なフレームワークで、ユニバーサルなサーバー レンダリング Web アプリケーションの開発を可能にします。Nuxt.jsは、Vue 上に構築されたサーバー側レンダリングおよび静的サイト生成フレームワークです。
vue2用のWijmoコンポーネントを使用すると、Nuxt.jsプロジェクトでWijmoコントロールを使用できます。WijmoのVue2用コンポーネントは、Wijmo コントロールのラッパーで、バックグラウンドで Wijmo コントロールを作成し、ref プロパティを介してコントロールのインスタンスへの参照を提供します。また、コントロール プロパティとイベントに宣言的にバインドできます。
なお、Wijmoはクライアント側レンダリングのみがサポートされており、サーバー側レンダリングはサポートされていません。サーバー側レンダリングは、nuxt.config.ファイルのssrオプションをfalseに設定することで無効にできます。
export default defineNuxtConfig({
ssr: false
})インストール
Wijmoのvue2用コンポーネントは、名前に「vue2」という単語を含む、コアライブラリパッケージごとに1つの npm パッケージのセットとして公開されます。
たとえば、「wijmo.vue2.grid」パッケージは、コア「wijmo.grid」パッケージのコントロールのコンポーネントを表します。パッケージは個別にインストールすることも、「@mescius/wijmo.vue2.all」のグループパッケージを使用してすべて一緒にインストールすることもできます。
npm install @mescius/wijmo.vue2.allWijmoモジュールのインポートと各種設定
Wijmo コンポーネントとディレクティブは、wijmo.vue2パッケージから直接インポートでき、次のようにコンポーネント内で使用できます。
<script setup>
import { ref } from 'vue';
//ディレクティブのインポート
import { WjTooltip as vWjTooltip} from '@mescius/wijmo.vue2.core';
//コンポーネントのインポート
import { WjInputNumber } from '@mescius/wijmo.vue2.input';
const count = ref(3)
</script>
<template>
<button v-wjTooltip="'これはテキストです。'">
文字列ツールチップ
</button>
<br>
<wj-input-number v-model:value="count"></wj-input-number><br>
</template> Wijmo CSSの追加
Wijmo コントロールの外観と動作を正しくするには、アプリケーションに Wijmo CSS スタイルを読み込む必要があります。CSSスタイルは @mescius/wijmo.stylesパッケージに同梱されています。
このESMインポートステートメントを使用して、アプリケーションの layout.tsxルートファイルまたは Wijmo コントロールを使用するコンポーネントにスタイルを読み込むことができます。
import '@mescius/wijmo.styles/wijmo.css'; Nuxt.jsのマークアップ構文
WijmoのVue用コンポーネントは、テンプレート マークアップでVue3命名規則を使用します。
次のように、コンポーネント、そのプロパティ、およびイベントを指定するために、low-case-dashとcamelCaseの構文がサポートされています。
<wj-input-number :value-changed=”ctrlValueChanged” > //low-dash-case
<WjInputNumber :valueChanged= “ctrlValueChanged”> // camelCase データフロー属性
属性名の前には、v-bind: ディレクティブ (またはその ':' 省略形) を付ける必要があります。
v-bind: ディレクティブを省略できる唯一の例外は、文字列型プロパティを文字列定数にバインドする場合です。これは一方向バインディングと呼ばれ、プロパティの値またはイベント ハンドラーを設定するために使用されます。
双方向バインディングは、v-modelディレクティブを使用して実現されます。これにより、フォーム入力とコンポーネント ータの間に双方向バインディングを作成して、値を最新の状態に保つことができます。v-model を使用すると、Vue はデータ プロパティと入力要素の値の更新を自動的に処理します。
<script setup>
import { ref } from 'vue'
import { WjInputNumber } from '@mescius/wijmo.vue2.input';
// variables
const count = ref(3)
</script>
<wj-input-number v-model:value="count" //双方向バインディングは
format="n2" //文字列定数へのバインド
:isReadOnly="true">//ブール値へのバインディング
</wj-input-number> イベントバインディング
Wijmoイベントハンドラーは、senderとイベント引数の つのパラメーターを持つ関数として定義されます。
コンポーネントイベントにバインドする場合は、このシグネチャを持つ関数の名前をバインディングソースとして指定する必要があります。
<script setup>
import { ref } from 'vue'
import { WjInputNumber } from '@mescius/wijmo.vue2.input';
const count = ref(3)
//イベントハンドラー
function valueChanged(s,e){
console.log("コントロールの値が変更されました："+s.value);
}
</script>
<template>
<wj-input-number v-model:value="count" :valueChanged="valueChanged"></wj-input-number>
</template> initializedイベント
すべての Wijmoコンポーネントには、コントロールがページに追加され、初期化された後に発生する「initialized」イベントが含まれています。
ハンドラー関数のシグネチャは、他の Wijmo イベント ハンドラーと同じです。
<script setup>
import { ref } from 'vue'
import { WjInputNumber } from '@mescius/wijmo.vue2.input';
const count = ref(3)
//イベントハンドラー
function initializedCtrl(s,e){
console.log("コントロール初期化されました。");
}
</script>
<template>
<wj-input-number v-model:value="count" :initialized="initializedCtrl"></wj-input-number>
</template> コードでWijmoコントロールを作成する
Wijmoコンポーネントは、Next.JSアプリでコンポーネントとして使用することを目的としています。
コードで Wijmo コントロールを作成する場合は、コンポーネントではなく、コアモジュールのWijmoコントロールを使用する必要があります。コアモジュールの名前は、対応するReact相互運用モジュールと同じですが、名前に「react」という単語は含まれません。たとえば、次のコードはコードで FlexGrid コントロールを作成します。
import { FlexGrid } from '@mescius/wijmo.grid';
let flex = new FlexGrid('#host_element');