Usage

Authentication

To handle authentication in your Nuxt app with Strapi, you can:

await this.$strapi.login({ identifier: '', password: '' })

Register

await this.$strapi.register({ email: '', username: '', password: '' })

Logout

await this.$strapi.logout()

Forgot password

await this.$strapi.forgotPassword({ email: '' })

Reset password

await this.$strapi.resetPassword({ code: this.$route.query.code, password: '', passwordConfirmation: '' })

User

Once logged in, you can access your user everywhere:

components/navbar.vue

<template>
  <div>
    <p v-if="$strapi.user">
      Logged in
    </p>
  </div>
</template>

<script>
export default {
  middleware: 'auth',
  computed: {
    user () {
      return this.$strapi.user
    }
  },
  methods: {
    logout () {
      this.$strapi.logout()
      this.$router.push('/')
    }
  }
}
</script>

You can for example use a Nuxt middleware to protect pages when the user is not logged in:

middleware/auth.js

export default function ({ redirect, $strapi }) {
  if (!$strapi.user) {
    return redirect('/login')
  }
}

See all the available methods

Entities

You can access the default Strapi CRUD operations by using these methods:

find
count
findOne
create
update
delete

await this.$strapi.find('products')

See more in $strapi methods

You can also define your Strapi entities to add shortcuts to the previous methods, see options.

await this.$strapi.$products.find()

Advanced

Accessing $http

If you defined custom routes in your Strapi API that goes out of the REST scope, this module exposes $http:

this.results = await this.$strapi.$http.$get('/products/search', { searchParams: { _q: 't-shirt' } })

Updating current user

You often need to update your user, and so on define a custom route in Strapi: PUT /users/me.

You can use this module to call it this way:

const user = await this.$strapi.$users.update('me', form)

And then mutate the user:

this.$strapi.user = user