Nuxt.js

InputManJSのコントロールを使用したNuxt.jsアプリケーションを作成するには、次の手順に従います。（その他のコントロールの作成方法は、各コントロールののサンプルを参照してください。）

以下の手順では、事前にNodeJSがコンピュータにインストールされている必要があります。

1. コマンドライン（コマンドプロンプトやターミナル）で次のコマンドを実行して、新しいNuxt.jsアプリケーションを作成します。 ここでアプリケーションを作成するときに、プロジェクト名はinputmanjs-nuxtとし、TypeScriptを有効にしたものを想定します。

npx nuxi@latest init inputmanjs-nuxt

2. 次のコマンドを実行して、作成したアプリケーションのディレクトリに移動します。

cd inputmanjs-nuxt

3. 次のコマンドを実行して、InputManJSのVueパッケージをインストールします。

npm install @mescius/inputman.vue

4. アプリケーションのルートフォルダに「components」フォルダを作成し、TextBox.vueファイルを作成します。 ここでは、GcTextBoxコンポーネントを利用したTextBoxコンポーネントを設定した例です。

<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>

5. app.vueを開き、作成したTextBoxコンポーネントをインポートします。

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

6. nuxt.config.ts を開き、ssr オプションに false を設定してください。（現在、InputManJS ではクライアントサイドレンダリングのみ対応しています。）

export default defineNuxtConfig({ ssr: false })

7. 次のコマンドを実行して、アプリケーションを起動します。

npm run dev

8. ブラウザで「http://localhost:3000/」を参照し、アプリケーションを表示します。