$strapi

Use the $strapi inside your Nuxt app

This module globally injects $strapi instance, meaning that you can access it anywhere using this.$strapi. For plugins, asyncData, fetch, nuxtServerInit and Middleware, you can access it from context.$strapi.

Properties

All properties are reactive. Meaning that you can safely use them in Vue template v-if conditions.

user

This object contains details about authenticated user. You can access it using $strapi.

// get user
this.$strapi.user
// set user prop
this.$strapi.user.avatar = ''

Methods

find(entity, params?)

  • Returns Promise

Get entries. Returns entries matching the query filters. You can read more about parameters here.

The second argument params is for query parameters:

await this.$strapi.find('products', { title: '' })
// With entity shortcut
await this.$strapi.$products.find({ title: '' })
You can also pass an array in two ways:
// 1st method
await $strapi.find('products', [['categories.name', 'women'], ['categories.name', 'men']])
// With entity shortcut
await $strapi.$products.find([['categories.name', 'women'], ['categories.name', 'men']])
// Entity shortcut with additional API Parameters
await $strapi.$products.find([['categories.name', 'women'], ['categories.name', 'men'], ['_limit', '200']])

// 2nd method
await $strapi.find('products', { 'categories.name': ['women', 'men'] })
// With entity shortcut
await $strapi.$products.find({ 'categories.name': ['women', 'men'] })
// Entity shortcut with additional API Parameters
await $strapi.$products.find({ 'categories.name': ['women', 'men'], _limit: 200 })
// 1st method
"?categories.name=woman&categories.name=men"
// 2nd method
"?categories.name=women%2Cmen"

See the Strapi endpoints.

count(entity, params?)

  • Returns Promise

Count entries. Returns the count of entries matching the query filters. You can read more about parameters here.

await this.$strapi.count('products', params)
// With entity shortcut
await this.$strapi.$products.count(params)

See the Strapi endpoints.

findOne(entity, id, params?)

  • Returns Promise

Get an entry. Returns an entry by id.

await this.$strapi.findOne('products', 1)
// With entity shortcut
await this.$strapi.$products.findOne(1)

Like the find method, you can pass optional query params as a third argument:

await this.$strapi.findOne('products', 1, { _publicationState: 'preview' })

See the Strapi endpoints.

create(entity, data)

  • Returns Promise

Creates an entry and returns its value.

await this.$strapi.create('products', { title: '' })
// With entity shortcut
await this.$strapi.$products.create({ title: '' })

See the Strapi endpoints.

update(entity, id, data)

  • Returns Promise

Partially updates an entry by id and returns its value. Fields that aren't sent in the query are not changed in the db. Send a null value if you want to clear them.

await this.$strapi.update('products', 1, { title: '' })
// With entity shortcut
await this.$strapi.$products.update(1, { title: '' })

See the Strapi endpoints.

delete(entity, id)

  • Returns Promise

Deletes an entry by id and returns its value.

await this.$strapi.delete('products', 1)
// With entity shortcut
await this.$strapi.$products.delete(1)

See the Strapi endpoints.

graphql(data)

  • Returns Promise

Performs an HTTP request to GraphQL API and returns its value

const restaurantId = 4;

await strapi.graphql({
  query: `query {
    restaurant(id: ${restaurantId}) {
      name
      phone
      owners {
        first
        last
      }
    }
  }`
});
restaurants.js
import gql from "graphql-tag";

export function getRestaurant() {
  const query = gql`
    query getRestaurant($id: Int!) {
      restaurant(id: $id) {
        name
        phone
        owners {
          first
          last
        }
      }
    }`;
  return query.loc.source.body;
}
import { getRestaurant } from 'restaurants.js'

const restaurantId = 4;

await this.$strapi.graphql({
  query: getRestaurant(),
  variables: {
    id: restaurantId
  }
})

register(form)

  • Returns Promise

Register using local strategy. Sets the User and Token.

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

See the Strapi documentation.

login(form)

  • Returns Promise

Login using local strategy. Sets the User and Token.

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

See the Strapi documentation.

forgotPassword(form)

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

See the Strapi documentation.

resetPassword(form)

  • Returns Promise

Reset password. Sets the User and Token.

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

See the Strapi documentation.

sendEmailConfirmation(form)

  • Returns Promise
await this.$strapi.sendEmailConfirmation({ email: '' })

See the Strapi documentation.

logout()

Clears the user and jwt in cookies.

this.$strapi.logout()

fetchUser()

  • Returns Promise

Fetch me user from /users/me route if a jwt is present in the cookies. Sets the jwt inside $http. Sets the User.

This method is called by default on init, so you don't have to.

On ssr mode, this method is called on the server-side only and the data are hydrated client-side so the HTTP call happens only once.

setUser(user)

Set user data.

this.$strapi.setUser(user)

You can use the $strapi.user property to mutate the object instead of overriding the user.

getToken()

Returns jwt from cookies.

this.$strapi.getToken()

setToken(token)

Sets token inside $http as a jwt Bearer.

Store jwt in cookies.

this.$strapi.setToken(token)

clearToken()

Remove jwt from $http and $cookies.

this.$strapi.clearToken()

Extends

$http

This module uses @nuxt/http under the hood, you can access it directly from there:

await this.$strapi.$http.$get(/* .... */)

$cookies

This module uses cookie-universal-nuxt under the hood, you can access it directly from there:

this.$strapi.$cookies.set('key', 'value')