Learn how to use the Strapi module in your Nuxt app


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


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


Custom user fields, if added to the entity, can be sent with the registration payload as well. For example phoneNumber.

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


await this.$strapi.logout()

Forgot password

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

Reset password

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


Once logged in, you can access your user everywhere:

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

export default {
  middleware: 'auth',
  computed: {
    user () {
      return this.$strapi.user
  methods: {
    logout () {

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

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

See all the available methods


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()

Usage with the Nuxt Composition Api

First you need to install the Nuxt Composition API and add it to your project

In order to use the Composition API you must be on Nuxt v2.12 or above because we will be using the useFetch Hook instead of useAsync due to the fact that useAsync won't re call the information after inital load

Your setup method will look like this

import { useFetch, ref } from '@nuxtjs/composition-api'
export default{
  setup() {
          const homepage = ref()
          useFetch(async ({ $strapi }) => {
              homepage.value = await $strapi.find('home')
          return { homepage }

⚠️ Remember that the JSON data is case sensitive

If you want to use dynamic route matching you can pass in the url parameters by doing this

import { ref, useFetch, useRoute } from '@nuxtjs/composition-api'
export default {
    name: '_id',
    setup() {
        const article = ref()
        const route = useRoute()
        useFetch(async ({ $strapi }) => {
            article.value = await $strapi.find('articles', {

        return { article }


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