Fetching content

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

Methods

$content(path, options?)

• path
  • Type: string
  • Default: /
• options
  • Type: object
  • Default: {}
  • Version: >= v1.3.0
• options.deep
  • Type: boolean
  • Default: false
  • Version: >= v1.3.0
  • Fetch files from subdirectories
• options.text
  • Type: boolean
  • Default: false
  • Version: >= v1.4.0
  • Returns the original markdown content in a text variable
• Returns a chain sequence

You can also give multiple arguments: $content('articles', params.slug) will be translated to /articles/${params.slug}

path can be a file or a directory. If path is a file, fetch() will return an object, if it's a directory it will return an Array.

All the methods below can be chained and return a chain sequence, except fetch which returns a Promise.

only(keys)

• keys
  • Type: Array | string
  • required

Select a subset of fields.

const { title } = await this.$content('article-1').only(['title']).fetch()

without(keys)

• keys
  • Type: Array | string
  • required

Remove a subset of fields.

const { title, ...propsWithoutBody } = await this.$content('article-1').without(['body']).fetch()

where(query)

• query
  • Type: object
  • required

Filter results by query.

Where queries are based on subset of mongo query syntax, it handles for example: $eq, $ne, $gt, $gte, $lt, $lte, $in, ...

// implicit (assumes $eq operator)
const articles = await this.$content('articles').where({ title: 'Home' }).fetch()
// explicit $eq
const articles = await this.$content('articles').where({ title: { $eq: 'Home' } }).fetch()

// $gt
const articles = await this.$content('articles').where({ age: { $gt: 18 } }).fetch()
// $lte
const articles = await this.$content('articles').where({ createdDateTime: { $lte: new Date().toISOString() } }).fetch()
// $in
const articles = await this.$content('articles').where({ name: { $in: ['odin', 'thor'] } }).fetch()

In order to filter in objects and array you need to enable nestedProperties, see configuration.

const products = await this.$content('products').where({ 'categories.slug': { $contains: 'top' } }).fetch()

const products = await this.$content('products').where({ 'categories.slug': { $contains: ['top', 'woman'] } }).fetch()

This module uses LokiJS under the hood, you can check for query examples.

sortBy(key, direction)

• key
  • Type: string
  • required
• direction
  • Type: string
  • Value: 'asc' or 'desc'
  • Default: 'asc'

Sort results by key.

const articles = await this.$content('articles').sortBy('title').fetch()

Can be chained multiple times to sort on multiple fields.

limit(n)

• n
  • Type: string | number
  • required

Limit number of results.

// fetch only 5 articles
const articles = await this.$content('articles').limit(5).fetch()

skip(n)

• n
  • Type: string | number
  • required

Skip results.

// fetch the next 5 articles
const articles = await this.$content('articles').skip(5).limit(5).fetch()

search(field, value)

• field
  • Type: string
  • required
• value
  • Type: string

Performs a full-text search on a field. value is optional, in this case field is the value and search will be performed on all defined full-text search fields.

The fields you want to search on must be defined in options in order to be indexed, see configuration.

Using an empty string as parameter will skip the search.

// Search on field title
const articles = await this.$content('articles').search('title', 'welcome').fetch()
// Search on all pre-defined fields
const articles = await this.$content('articles').search('welcome').fetch()
// Search will be skipped if the search string is empty
const articles = await this.$content('articles').search('').fetch()

surround(slugOrPath, options)

• slugOrPath
  • Type: string
  • required
• options
  • Type: object
  • Default: { before: 1, after: 1}

Get prev and next results around a specific slug or path.

You will always obtain an array of fixed length filled with the maching document or null.

const [prev, next] = await this.$content('articles')
  .only(['title', 'path'])
  .sortBy('date')
  .where({ isArchived: false })
  .surround('article-2')
  .fetch()

// Returns
[
  {
    title: 'Article 1',
    path: 'article-1'
  },
  null // no article-3 here
]

search, limit and skip are ineffective when using this method.

fetch()

• Returns: Promise<object> | Promise<Array>

Ends the chain sequence and collects data.

catch()

Checks if the .md file exists in content directory or not.

It should be inserted after the fetch().

Example

const articles = await this.$content('articles')
  .only(['title', 'date', 'authors'])
  .sortBy('date', 'asc')
  .limit(5)
  .skip(10)
  .where({
    tags: 'testing',
    isArchived: false,
    date: { $gt: new Date('2020-03-31') },
    rating: { $gte: 3 }
  })
  .search('welcome')
  .fetch()
  .catch((err) => {
     error({ statusCode: 404, message: 'Page not found' })
  })

You can check how to use the Content API in development.