CODEWITHSUNDEEP
vue.jsnuxt.js
Yura
Yura

Reputation: 2248

Nuxt auth with laravel sanctum throws mounted error

As the title said, I'm trying to do authentication using @nuxtjs/auth plugin. But it doesn't work. I've checked the documentation and make sure I've implemented it the correct way and it is. I googled for an hour and still got no reference to fix this error.

Please help me fix this. Any kind of help would be highly appreciated.

nuxt.config.js

...
modules: [
  ...
  '@nuxtjs/axios',
  '@nuxtjs/auth',
  ...
],

axios: {
  proxy: true,
},

proxy: {
  '/api': {
    target: 'https://myapp.nuxtjs.app',
  },
},

auth: {
  strategies: {
    laravelSanctum: {
      provider: 'laravel/sanctum',
      url: process.env.BASE_API_URL || 'http://mylaravelapp.test',
    },
  },
},
...

login.vue

// template script is a apocalyptic,
// lets assume the button and `onSubmit` call works. (it does work)
export default {
  ...
  data() {
    return {
      credentials: {
        email: '',
        password: '',
        remember: false,
      }
    }
  },
  methods: {
    onSubmit() {
      this.$auth
        .loginWith('laravelSanctum', this.credentials)
        .catch((error) => this.onError(error))
    }
    ...
  }
}

error message

client.js?06a0:97 TypeError: Cannot read property 'mounted' of undefined
    at Auth.mounted (auth.js?facc:112)
    at Auth.setStrategy (auth.js?facc:108)
    at Auth.loginWith (auth.js?facc:123)
    at VueComponent.onSubmit (login.vue?ec86:87)
    at submit (login.vue?8c7c:35)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLFormElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLFormElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

Upvotes: 1

Views: 893

Answers (1)

Yura
Yura

Reputation: 2248

I finally made it works by uninstalling the @nuxtjs/auth plugin and use @nuxtjs/auth-next instead. It seems like it they don't mention this on the documentation. The app works just fine now.

Upvotes: 1

Related Questions