@nuxtjs/strapi @nuxtjs/strapi

Usage

Learn how to use the Strapi module in your Nuxt app

Authentication

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

Login

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

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', {
                slug: route.value.params.id,
            })
        })

        return { article }
    },
}

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
Getting Started Setup
Guide Hooks