Nuxt.js で使用する方法

Nuxt.js アプリケーションでは、次の手順で InputManJS のコンポーネントを使用することができます。

npx nuxi initコマンドを利用して、nuxt.js アプリケーションを作成します。(プロジェクト名は inputmanjs-nuxt とします。)
```
npx nuxi init inputmanjs-nuxt
```
アプリケーションプロジェクトのフォルダに移動します。
```
cd inputmanjs-nuxt
```
以下のコマンドで InputManJS のパッケージをインストールします。
```
npm install @mescius/inputman.vue
```

アプリケーションのルートフォルダに「components」フォルダを作成し、TextBox.vue ファイルを作成します。ここでは、GcTextBox コンポーネントを利用した TextBox コンポーネントを設定します。次のように GcTextBox コンポーネントをインポートし、text プロパティと ontextchanged イベントを設定します。

<script setup>
  import '@mescius/inputman/CSS/gc.inputman-js.css';
  import { GcTextBoxComponent } from '@mescius/inputman.vue';

  // textプロパティに割り当てる値を設定します。
  const textValue = 'テキスト';

  // ontextchangedイベント用の関数を定義します。
  const textChanged = (sender) => console.log(`テキストは"${sender.text}"に変更されました。`);
</script>

<template>
  <div>
      <GcTextBoxComponent
      :text="textValue"
      @ontextchanged="textChanged"
      ></GcTextBoxComponent>
  </div>
</template>

次に app.vue を開き、先ほど作成した TextBox コンポーネントをインポートします。

<template>
  <div>
    <p> Nuxt.JS v3 + InputManJS demo </p>
    <TextBox />
  </div>
</template>

nuxt.config.ts を開き、ssr オプションに false を設定してください。（現在、InputManJS ではクライアントサイドレンダリングのみ対応しています。）
```
export default defineNuxtConfig({ ssr: false })
```
nuxt.js アプリケーションを実行します。
```
npm run dev
```

Nuxt.js で使用する方法