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