Shopify storefront nuxt3 customer login error - graphql

Question

Hi i am trying to implement customer login using shopify storefront with graphql mutations but unable to do so getting an error of
TypeError: Cannot read properties of undefined (reading 'request')
can someone please help me here...
Thanks for looking
here is my form template
<form #submit.prevent="login">
<input
id="email"
type="email"
name="email"
v-model.trim="user.email"
autocapitalize="off"
autocorrect="off"
placeholder="Email Address"
spellcheck="false"
required
><br>
<input
id="password"
type="password"
name="password"
v-model.trim="user.password"
autocapitalize="off"
autocomplete="off"
autocorrect="off"
placeholder="Password"
spellcheck="false"
required
><br>
<button type="submit" class="btn-account">
<span>{{ isLoading === true ? 'Working...' : 'Login' }}</span>
</button>
</form>
Here is my script
<script>
// Graphql
import { customerLoginMutation } from "#/graphql/queries"
export default {
name: "Login",
data() {
return {
errorMessage: false,
isLoading: false,
user: {
email: "",
password: ""
}
}
},
methods: {
async login() {
const user = this.user
this.isLoading = true
try {
const { customerAccessTokenCreate } = await this.$graphql.request(customerLoginMutation, {
input: user
})
const { customerAccessToken, customerUserErrors } = customerAccessTokenCreate
if (customerUserErrors.length) {
const [{ message }] = customerUserErrors
throw new Error(message)
}
await this.$store.dispatch("login", customerAccessToken)
this.$router.push("/account")
}
catch (error) {
this.isLoading = false
this.errorMessage = true
console.error(error)
}
}
}
}
</script>
Here is my customer login mutation
export const customerLoginMutation = gql
mutation ($input: CustomerAccessTokenCreateInput!) {
customerAccessTokenCreate(input: $input) {
customerAccessToken {
accessToken
expiresAt
}
customerUserErrors {
code
field
message
}
}
}
export const customerAccessTokenRenew = gql
mutation ($customerAccessToken: String!) {
customerAccessTokenRenew(customerAccessToken: $customerAccessToken) {
customerAccessToken {
accessToken
expiresAt
}
userErrors {
field
message
}
}
}
export const customerActivate = gql
mutation ($id: ID!, $input: CustomerActivateInput!) {
customerActivate(id: $id, input: $input) {
customer {
id
}
customerAccessToken {
accessToken
expiresAt
}
customerUserErrors {
code
field
message
}
}
}