Nuxt3で新規会員登録のフォームを作った(buttonのクリックイベントで発火ですが)ので、備忘録もかねて残しておきます。
この辺りの認証機能について調べても、正式版がリリースされていない現在の状況だと、検索してもまだNuxt2の手法しか出てこないんですよね。
axiosを使うとか、authを使うとか。
そんな感じなので、Nuxt3でuseFetch()を使った一例を作ったので置いておきますね。
(useFetch()が何者なのかは、公式なり何なりを見て確認して頂ければと思いますw)
まずはtemplate側
<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側。
<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でしょうか。
コメント