Nuxt3で新規会員登録フォームを作った話

Nuxt3で新規会員登録のフォームを作った（buttonのクリックイベントで発火ですが）ので、備忘録もかねて残しておきます。

この辺りの認証機能について調べても、正式版がリリースされていない現在の状況だと、検索してもまだNuxt2の手法しか出てこないんですよね。

axiosを使うとか、authを使うとか。

<template>
  <div class="form">
    <h1>新規会員登録はこちら</h1>
    <div>
      <div>
        <label for="email-address">メールアドレス</label>
        <input
          v-model="email"
          type="text"
          name="email-address"
          id="email-address"
          autocomplete="email"
        />
      </div>
      <div>
        <label for="username">ユーザー名</label>
        <input
        v-model="username"
        type="text"
        name="username"
        id="username"
        autocomplete="username"
        />
      </div>
      <div>
        <label for="password">パスワード</label>
        <input
          v-model="password"
          type="password"
          name="password-confirm"
          id="password"
          autocomplete="password"
        />
      </div>
    </div>
    <div>
      <button @click="userRegist()">
        登録する
      </button>
    </div>
  </div>
</template>

この様な感じで発火イベントを作りました👀

あ、そういえばbackendですが、今回は『django（djoser + REST_framework swagger）』という環境でやってます。

そして、defaultのdjangoのuserモデルにAPIとして飛ばしてる感じですね。

この辺りはbackendの環境によって色々変わってくると思うので、まあ参考までに。

<script lang="ts">
export default {
  name: 'RegisterForm',
  data() {
    return {
      email: '',
      username: '',
      password: '',
    };
  },
  methods: {
    async userRegist() {
      const postData = {
        email: this.email,
        username: this.username,
        password: this.password,
      };
      const { data } = await useFetch('http://localhost:8000/api/v1/auth/users/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: postData,
      });
    },
  },
};
</script>

この様な感じで新規会員登録のフォームが作れました。

（最低限の機能だけですが）

後はデザイン、バリデーションなど付け足していけば取り敢えずOKでしょうか。