インストール

まずは、以下のコマンドを入力してください。

npm init nuxt-app nuxt-site

これを入力し終えると、以下の質問が開始されます。

1. Package manager
    - Yarn
    - Npm

本記事ではnpmコマンドを使用しますので、Npmを選択します。

1. Programming language
    - JavaScript
    - TypeScript

JavaScriptを選択します。

この部分は長くなりますので省略しますが、それ以外の部分はすべてNoneと回答します。詳細は GitHub - nuxt/create-nuxt-app: Create Nuxt.js App in seconds. を確認してください。

cd nuxt-site

後はこちらのコマンドを入力して終了です。

ちなみにディレクトリは以下のようになります。

f:id:ShotaNukumizu_1000:20211229065956p:plain

入力フォームの作成

Bootstrapのインストール

nuxt.config.jsにアクセスして、Bootstrapをインストールしてください。

export default {
  ssr: false,

  head: {
    title: 'nuxt-chat',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      // 追加
      { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' }
    ]
  },
.........

次に、Bootstrapにアクセスして以下のテンプレートを使います。

▼テンプレートのURL

getbootstrap.jp

▼テンプレートの画像

f:id:ShotaNukumizu_1000:20211229064356p:plain

そして、pagesディレクトリのindex.vueにアクセスし、以下のプログラムを書いてください。

<template>
  <div class="container">
    <div class="d-flex flex-column align-items-stretch bg-white">
      <div class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
        <input type="text" class="fs-5 fw-semibold" v-model="username">
      </div>
      <div class="list-group list-group-flush border-bottom scrollarea">
        <div class="list-group-item list-group-item-action py-3 lh-tight">
          <div class="d-flex w-100 align-items-center justify-content-between">
            <strong class="mb-1"></strong>
          </div>
          <div class="col-10 mb-1 small"></div>
        </div>
      </div>
    </div>
    <form @submit.prevent="submit">
      <input type="text" class="form-control" placeholder="Write a message.">
    </form>
  </div>
</template>

<style>
.scrollarea {
  min-height: 500px;
}
</style>

メモを追加する機能の作成

次に、メモを追加する機能を作っていきます。index.vueのtemplate要素の下にscriptタグを付けて、以下のプログラムを書いてください。

<script>
export default {
  data() {
    return {
      username: 'username', // デフォルトで名前を設定
      message: '', // メッセージを入力
      messages: [] // メッセージを入れるリストを作成
    }
  },
  methods: {
    submit() {
      // 入力したメッセージを追加する
      this.messages.push({
        username: this.username,
        message: this.message,
      })
     // 初期化
      this.message = ''
    }
  }
}
</script>

<style>
.scrollarea {
  min-height: 500px;
}
</style>

あとは、JavaScriptで記述した内容を反映させるために、index.vueで記述したtemplateタグに以下の内容を記述してください。

<template>
  <div class="container">
    <div class="d-flex flex-column align-items-stretch bg-white">
      <div class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
        <input type="text" class="fs-5 fw-semibold" v-model="username">
      </div>
      <div class="list-group list-group-flush border-bottom scrollarea">
        <!---メモの一覧を表示させる---->
        <div class="list-group-item list-group-item-action py-3 lh-tight"
          v-for="message in messages" :key="message"
        >
          <div class="d-flex w-100 align-items-center justify-content-between">
            <strong class="mb-1">{{ message.username }}</strong>
          </div>
          <div class="col-10 mb-1 small">{{ message.message }}</div>
        </div>
      </div>
    </div>
    <!---メモの一覧を投稿する。---->
    <form @submit.prevent="submit">
      <input type="text" class="form-control" placeholder="Write a message." v-model="message">
    </form>
  </div>
</template>